As someone who loves trivia and learning random facts, I wanted to create a project that encompasses that interest. I really enjoy watching Jeopardy!, one of the most popular American game shows, which inspired me to create a web application modeled after the Jeopardy question and answer format. I decided to create a Jeopardy Maker, where users can add trivia cards to be generated into an interactive Jeopardy Board. It includes a Firebase login, MongoDB Database, RESTful API calls using axios and a Node-Express Server, and a user interface developed by React.js.
- Prerequisites: Make sure to have Node.js, Git, and MongoDB installed onto your machine.
- Clone the repository using
git clone. - Navigate to frontend directory by
cd frontendand install dependencies by runningnpm install. - Run frontend using
npm start. The application will open onhttp://localhost:3000/login. - Navigate out of the frontend directory to backend by
cd ../backend. - Run backend using
npm start. You should see a success message on your terminal output, which indicates that the server has connected to the database. - Go to
http://localhost:3000/loginand start using the application!
I did this project with knowledge of Javascript and React. Here are some other resources I used for other parts.
- https://youtu.be/c2M-rlkkT5o: I learned some MongoDB essentials here.
- https://youtu.be/fgTGADljAeg: I learned about REST API's and testing them here.
- https://youtu.be/R81g-2r6ynM: I followed this tutorial to learn how to build a simple full stack application, and a lot of principles from here were applied to this project!
- https://www.makeuseof.com/react-form-data-mongodb-database-store/: I learned how to synchronize React form data with MongoDB.
- https://www.youtube.com/watch?v=cZAnibwI9u8&t=3s: Learned how to set up Firebase sign in with Google
- https://stackoverflow.com/questions/60923933/mern-stack-same-data-appearing-for-all-users: I learned to deal with different user data in MongoDB
- And a bunch of other Google searches, documentations, YouTube videos, and more to get my project to work!
This project has been an incredible experience for me to learn about the fundamentals of full stack development! However, this is just a taste and there is so much more to learn.
This is my stopping point for now, although if I were to come back to this project in the future, there are several things I would like to change, edit, or do:
- Deploy it online!
- Use a different database, or use MongoDB Atlas on MongoDB Cloud. This would definitely help during deployment.
- Significantly change my UI structure. In hindsight, I realize that I could have created a lot more individual components with props to make my code a lot more cleaner and less repetitive. However while coding I was pretty much putting my ideas down and going with what worked at the moment!
- Continue to identify any more bugs... there's probably still some in there unfortunately
... and more!