Flash Card Quizzer

With this application I tried to use the MERN stack approach to creating a fullstack application. I started by creating a mongo database on mongodb.com. I created 2 schemas. One was for the decks which contained the title and the cards for each specific deck. The other schema was for storing user information such as username and password. Using mongoose, I connected my server to the database and was able to manipulate the database through server side code. I created a controllers folder where I stored async functions that would listen for client requests and then post, get, or delete data from the mongo database.

On the client side, I created an API folder to store async functions that would allow the user to interact with the RESTful API by using the 'POST', 'GET', and 'DELETE' methods at the specified endpoints. The client would make requests using these methods to the API which would then fetch the correct data from the specified endpoints to ship back to the client. To display this data, I created a Decks component which would display all the available decks from the database. I also made a Deck component which would do the same thing with the cards. For better user experience, I styled these components with CSS grid and allowed the user to create or delete decks from the UI. Finally, I made a login and registration page so that each user could be authorized and have access to their own decks when they log in.

The way I went about the authorization process was to add authorization headers to the api endpoints that required them. I then used a middleware function and JWT (or jsonwebtoken) so that a user could only access the specified endpoint if they had the required JWT token. I used the CreateContext hook from React to pass the token around the app and check where the user would be authorized. Finally, I used the BrowserRouter hook from React so that I can quickly navigate to the desired endpoints. Overall, I enjoyed making this app and am happy that I got exposed to alot of new concepts as well learned how all of these technologies can combine together to create a useful product.

Check out my site: Flash-Card-Quizzer