Learning by doing. My first MERN stack app
Today I’m going to talk about my final project at Ironhack, the bootcamp I attended to jumpstart my new career journey.
My application is called “Pura Vida”, and it’s an app for various Bohemian-style home decor items and accessories. I tell a story of the name in one of my previous blog posts. Hint: look at the favorite restaurant question:)
As a former Amazon seller, I knew the ins and outs of the e-commerce world. For this project, my goal was to break down the complex process of building an e-commerce store into manageable steps and bring my vision to life.
Here is the project link if you want to test it out yourself!
Tech stack
Let’s review the technical stack for the application.
- I used MongoDB for my database
- Express.js to build the server-side
- Node.js as a runtime environment to execute JavaScript code
- React.js for the front end
- Axios to make API calls
- The app is mobile-friendly, has a responsive design, and is styled with Bootstrap
The application is deployed with Heroku on the server side and Netlify on the client side.
Functionality
Most of us shop online these days so the process is pretty self-explanatory. You create and log in to your account, go through the list of items, add as many as you like to the cart, and go to checkout where you have to input your shipping information. Then you get redirected to the payment page and voila — the order is confirmed!
Some of the features that are implemented at this point include:
- User authentication with JWT (JSON Web Token)
- Password length and security check
- You can add items, as well as increase and decrease quantity both from the product list page and from the individual items pages
- There are pop-up “added to cart” messages implemented with a cool npm package called Toastify
- In a shopping cart, the subtotal and total price is updated automatically every time you add or delete an item.
Features that are on the way:
- Authentication with Google account (my personal favorite whenever I create an account on any website)
- Payment processing with Stripe
Lessons learned
Here comes a scary story. Thirty minutes before my project presentation my server crashed. It happened when I tried to create a new account with the credentials that were already in the database. After chaotic last-minute attempts, I was able to patch it up and present but that's how I learned that proper error handling is really important.
Working on this project allowed me to identify some gaps in my knowledge. Specifically, I realized I needed to improve my understanding of cross-referencing between the front- and backend and data modeling, which are all parts of my ongoing learning journey.
Last word
I have to say I’m really proud of what I was able to accomplish in this project in a short period of time. I couldn’t have done it without guidance from my mentors and encouragement from my peers and friends, so I’m really grateful for all the support!
Sharing the project link again here. Please take a look and let me know if you have any questions or suggestions!
