Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chanmeng666/journey-of-reincarnation
A captivating web application that simulates the journey of reincarnation, allowing users to explore different life circumstances across various countries and social backgrounds through an interactive and immersive experience.
https://github.com/chanmeng666/journey-of-reincarnation
chartjs dark-mode framer-motion game i18n nextjs react react-simple-maps shadcn shadcn-ui simulation tailwindcss typescript visualization web-app
Last synced: about 18 hours ago
JSON representation
A captivating web application that simulates the journey of reincarnation, allowing users to explore different life circumstances across various countries and social backgrounds through an interactive and immersive experience.
- Host: GitHub
- URL: https://github.com/chanmeng666/journey-of-reincarnation
- Owner: ChanMeng666
- License: gpl-3.0
- Created: 2024-10-29T11:48:04.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2024-12-07T11:23:30.000Z (27 days ago)
- Last Synced: 2024-12-07T11:25:40.460Z (27 days ago)
- Topics: chartjs, dark-mode, framer-motion, game, i18n, nextjs, react, react-simple-maps, shadcn, shadcn-ui, simulation, tailwindcss, typescript, visualization, web-app
- Language: TypeScript
- Homepage: https://journey-of-reincarnation.vercel.app/
- Size: 3.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Journey of Reincarnation
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](LICENSE)
[English](README.md) | [简体中文](README.zh-CN.md)
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.
https://github.com/user-attachments/assets/3a3a434f-b14c-46c9-82b8-8c2962702560
## ✨ 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](https://nextjs.org/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
- **Animations**: [Framer Motion](https://www.framer.com/motion/)
- **Charts**: [Chart.js](https://www.chartjs.org/) with [react-chartjs-2](https://react-chartjs-2.js.org/)
- **Maps**: [react-simple-maps](https://www.react-simple-maps.io/)
- **Internationalization**: [i18next](https://www.i18next.com/)
- **Theme**: [next-themes](https://github.com/pacocoursey/next-themes)
## 🚀 Getting Started
### Prerequisites
- Node.js 18+ and npm
### Installation
1. Clone the repository
```bash
git clone https://github.com/ChanMeng666/journey-of-reincarnation.git
cd journey-of-reincarnation
```
2. Install dependencies
```bash
npm install
```
3. Run the development server
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) with your browser
### Build
```bash
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](LICENSE) file for details.
## Tech Used
## Author
**Chan Meng**
- LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)
- GitHub: [ChanMeng666](https://github.com/ChanMeng666)