Journey of Reincarnation

English | 简体中文

A captivating web application that simulates the experience of reincarnation, offering users a chance to explore different life circumstances across various countries and social backgrounds.

2024-12-14.16-34-21.mp4

✨ Features

• 🌍 Global Distribution: Experience reincarnation across different countries with an interactive world map
• 📊 Dynamic Statistics: Visualize social class and birthplace distributions through engaging charts
• 🎭 Special Events: Encounter unique life circumstances with random special event triggers
• 🌓 Dark/Light Mode: Seamlessly switch between dark and light themes
• 🔊 Sound Effects: Immersive audio feedback for user interactions
• 🌐 Multilingual: Support for English and Chinese languages
• 📱 Responsive Design: Optimized for both desktop and mobile devices
• 📤 Share Feature: Easy sharing of results through various platforms

🛠️ Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Animations: Framer Motion
• Charts: Chart.js with react-chartjs-2
• Maps: react-simple-maps
• Internationalization: i18next
• Theme: next-themes

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Clone the repository

git clone https://github.com/ChanMeng666/journey-of-reincarnation.git
cd journey-of-reincarnation

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Open http://localhost:3000 with your browser

Build

npm run build

🌟 Usage

1. Click the "Start Journey" button to begin your reincarnation experience
2. View your new life circumstances including country, gender, social class, etc.
3. Explore the world map to see your birth location
4. Check the statistics to understand global distributions
5. Share your results with friends
6. Reincarnate again to experience different possibilities

📦 Project Structure

src/
├── app/               # Next.js app directory
├── components/        # React components
│   ├── ui/           # UI components
│   └── layout/       # Layout components
├── contexts/         # React contexts
├── hooks/            # Custom hooks
├── i18n/             # Internationalization
├── lib/              # Utility functions
└── types/            # TypeScript types

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

See the GPL-3.0 license file for details.

Tech Used

Author

Chan Meng

• LinkedIn: chanmeng666
• GitHub: ChanMeng666