Sakura Study is a MERN (MongoDB, Express.js, React, Node.js) language learning app designed to help people study Japanese using a gamified approach, similar to Duolingo. The app offers exercises for users to practice material from the popular Japanese textbook, Genki: An Integrated Course in Elementary Japanese (3rd edition), including hiragana, katakana, kanji, vocabulary, and phrases. It also features leaderboards for users to compete with each other and track their progress, along with a dark mode feature. It was created to assist students of all ages and levels in learning Japanese in a fun and engaging way through self-study.
⭐ Note: The website may require some time for the server to spin up.
To install Sakura Study on, follow these steps:
- Clone the repository.
- Install the dependencies in both the client and server directories by running
npm installat the root directory. - Create a .env file in the server directory and add the following environment variables:
MONGODB_URI
JWT_SECRET
The MONGODB_URI is the connection string to your MongoDB database. The JWT_SECRET can be any string of your choice.
- Run
npm run devat the root directory to start the development server and launch the app in your browser. - Navigate to http://localhost:5173/ to view the project.
Sakura Study provides a range of features to help users study Japanese including:
- Practice exercises for Hiragana, Katakana, Kanji, vocabulary, and phrases
- Track progress and compete with other users through leaderboards
- Secure user authentication and authorization using JWT
- User data management with MongoDB
- Client-server communication through GraphQL
- Sleek UI, dark mode, and responsive design using Tailwind CSS
- Efficient state management with Redux
Future features include:
- More practice exercises
- Achievements
- Profile settings
To use Sakura Study, follow these steps:
- Sign up and create an account.
- Navigate to the Dashboard to practice vocabulary and phrases from your lessons.
- Go to the Characters page to study and practice hiragana, katakana, and kanji from your lessons.
- Check the Leaderboards to track of your progress and see other users' progress.
- Access the Profile page to view your statistics and progress. As of now, it only tracks your total xp.
- Toggle dark mode on or off depending on your preferences.
- When you are done with your session, log out to protect your account.
- To start a quiz, click on a 'Start Quiz' button in a section and begin answering questions. Select the correct choice for each question and click on the 'Check' button to check your answer. You can also skip questions by clicking the skip button. Correct answers will increase your progress while incorrect answers or skipped questions will decrease your progress. Once the progress bar is filled, the quiz will end and you will be taken to the results page.
This is the home page, where users start their journey.
At the Characters page, users can begin learning hiragana, katakana, and kanji.
Climb the ranks and compete with fellow learners on our leaderboards.
View your progress on your profile page.
Test your knowledge and reinforce your learning with interactive quizzes.
Switch to Dark Mode for a comfortable, nighttime-friendly experience.
Mobile responsive design ensures a seamless experience on desktops, tablets, and smartphones.
Sakura Study is built using a variety of technologies including:
- Vite
- React
- React Router
- Redux
- Node.js
- Express
- MongoDB
- GraphQL
- JWT
- Tailwind CSS
- Framer Motion
- Hero Patterns - Background patterns
- Affinity Designer - Original logo and image designs by kt946
Contributions to Sakura Study are welcome and encouraged! If you'd like to contribute to this project, please fork the repository and submit a pull request.
- Duolingo: A language-learning website.
- Genki: An Integrated Course in Elementary Japanese (3rd edition): A Japanese textbook series.
- kt946 - Project creator
This project is licensed under the MIT License.