Hey everyone!!
I just made my created my first fullstack application, called The Quotes Place. Simply stated, it's an platform where users can find and explore great quotes selected from all around the world! Here is the list of features!
- A login system
- Ability to like and dislike quotes
- An admin system (for adding quotes)
- Dynamically generated profiles
Here are some screenshots!
If you'd like to check it out, here's the link:
Repl link: https://replit.com/@STCollier/The-Quotes-Place?v=1 (I'd really appreciate it if you liked it!)
Working URL: https://the-quotes-place.stcollier.repl.co/
How I made it
It took 6 weeks to fully build this application. The stack that I chose was Next.js as the framework, Sass for styling, and MongoDB as the database. I had previous experience with React.js, but I was almost completely new to learning about clients, servers, APIs, requests, status codes, and so much more.
Being almost completely new to all of this and jumping straight into building a fullstack application was a key factor in why this took so long to build (6 weeks as I stated earlier!) Perhaps if I had learned the basics of express.js, I could have built this a lot faster and had less of a steep learning curve. It's crazy thinking back on when I first started to build the application, I didn't even know what a GET or POST request was!!
The building process
When I first created a Next.js project, it looked pretty similar to React.js, so I thought it would be pretty easy. But as I stated previously, I had little to no knowledge about how servers and databases worked, so it was quite the opposite. Even just getting the basic login system up was hard, and I was using ReplAuth, one of the easiest authentication systems to start using. Thanks to some help from a fellow discord member, I got introduced to req.headers and getServerSideProps, both of which I would come to use over and over again in my application. After about a week, I had successfully made a basic website where you could login with Replit. I had also used a tutorial to connect MongoDB to Next.js, but that was all in the backend and I hadn't connected it to an API to display results yet.
Although this first step was already really hard, it would only get harder. Next up I decided to try to display results from my MongoDB collection onto the page. I was introduced to Array.map, the MongoDB compass, and a lot more. Finally I had displayed quotes to the page, but now I had to add proper full stack functionality, by adding a feature where you could like a quote. This is where things started to get really rough.
The like feature alone took me over 2 weeks to get working. I dug through a ton of Stack Overflow posts, gists such as this one, and so much more, but the reason I struggled so much was because I had to learn about APIs, HTTP request methods and statuses, proper JSON responses, along with integrating this all with MongoDB. I almost gave up here a few times, but I kept going. I must have googled hundreds of things, such as "MongoDB check for duplicate", "How to POST and GET data", "HTTP status codes", and so much more. The 4 best tools that helped me finally figure everything out were
- Stack Overflow
- Github
- reqbin.com for testing my APIs
- Digging through other people's Next.js projects
But finally, 2 weeks later and 90 lines of code that had been constantly revised, I had a working like button. I found that using the npm package next-connect made this proccess a breeze for handling HTTP request methods.
After this, the learning curve finally reached its climax, and things weren't that bad. The application was still nowhere near finished, but I was a lot more familiar with the stack. Soon I began writing API's quickly, without even needing to use google! I began to memorize a lot of HTTP status codes as well, which was kinda fun. Soon after about another week of work the application was finally starting to come together!
To sum things up, here's some things that I did to finally finish my application.
- Refactor and rewrite all my API's to use next-connect
- Add a MongoDB collection and API to store user data
- Add a tooltip to display who liked/disliked a post
- Add dynamic routing for each user
- Add an admin system to add quotes directly from the application
- Added a ratelimit (after having a friend completely spam requests and break the database)
And of course there was some nice frontend things to do too, such as
- Making the application responsive and
- Adding nice animations
But all in all, I'm quite proud of what I built. It was so nice to see that my application finally came into fruition, and I'm super thankful for what I could learn along the way. I definitely want to use Next.js and MongoDB sometime in the future as well; I really like that stack! So finally thanks for reading, and happy coding!
Top comments (5)
I'm very happy for you! It's cool that you managed to carry out your plan. Thanks for the article for beginners, this is the very thing. It was interesting to read. Happy coding!
nice! You should've asked me for help :)
Thanks! I'm usually very cautious with asking for help, as I don't want to disturb the person whom I'm asking, but I appreciate that you're willing to help nonetheless :)
I see :)
Fun article to read - yes when you miss knowledge of some basic concepts it's gotta be hard, anyway you pushed on and you made it :)