You'll find the live website here: https://delta-quiz.netlify.app/
Delta Quiz is a quiz app that allows you to create and take quizzes.
It is built with:
- React js for the frontend
- React Bootstrap for responsive layouts and simple designs
- Vanilla CSS for custom stylings
- React Router for routing
- React Fontawesome for icons
- Recharts for Amazing Charts
In this below list, I'm writting the actual work flow I've followed to complete the project.
- Create React App Named "Delta-Quiz" using npx create-react-app delta-quiz command.
- Create Local Repository using git init command.
- Changed the favicon and title of the website
- pushed the local repository to github using git remote add origin command
- Installed React Router using npm install react-router-dom command.
- Installed React Bootstrap using npm install react-bootstrap bootstrap command.
- Installed React Fontawesome using npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome command.
- Installed Recharts using npm install recharts command.
- Installed React Toastify using npm install react-toastify command.
- Created Components Folder and add all the components one by one when necessary.
- Created Navar to Navigate between pages.
- Fetched Data from API and displayed it in the UI.
- Added Quiz Page and Quiz Component.
- Added Quiz Result Component, and display the result.
- Added a Composite Chart(Bar and Line) in statistics page. it contains the total number of quizes availabe per category.
- Added a Blog Page contains 3 provided questions and answers.
- Added a 404 not found page
- Made the website Responsive
- Check and Push Everything to Github.
- Build the project using npm run build command.
- Deployed the project using Netlify.
- Installing React
- Installing React Router
- Creating Routes with React Router
- Creating Components
- Fetching Data from API
- Passing Data using Props
- Using React Bootstrap
- Using Recharts
- Using React Toastify
- Using React Fontawesome