Overview
Quizin is a simple quiz application that allows users to take and view quiz results. Quizin uses API from Open Trivia DB. Quizin is a challenge given by DOT Indonesia to fulfill the internship requirements in creating a quiz application using React.
Features
- User Authentication: Users can sign up and log in using their username and password.
- Doing Quiz: Users can take a quiz and view the results.
- Quiz Results: Users can view their quiz.
- Memoization: If the user suddenly closes the browser the quiz data will still be saved and when the user returns it can immediately resume the previous quiz.
Challenges
- User authentication: Because this is my full stack application where previously I was only a front end, in this project I tried to work as a full stack developer so user authentication is a challenge that I think is quite difficult because this feature involves the access rights of each user.
Learning Outcomes
In this project, I learned about how to use the API that I built myself using expressjs, and I learned to use the database ORM, drizzle orm.
Installation & Usage
To run the project locally:
- Clone the repository:
git clone https://github.com/vunky-himawan/quizin.git
- Install dependencies:
npm install
- Create a .env file and add your database credentials.
cp .env.example .env
- Add your secret key in the .env file.
ACCESS_TOKEN=example
JWT_SECRET=example
- Create a database and add the database credentials in the .env file.
APP_PORT=3000
DB_HOST=localhost
DB_USERNAME=example
DB_PASSWORD=example
DB_DATABASE=example
DB_URL="mysql://username:[email protected]:3306/database"
- Run migrations:
npx drizzle-kit migrate
- Run seeder:
npm run db:seed
- Install front end dependencies:
cd src/frontend && npm install
- Start the app:
npm run dev