Recom, "React e-commerce"

This is my final project for a Fullstack web development course, and my first major web project. It consists of a store app, a backend server, a database, and an admin app. The user can add items from the store into their cart, and go through a full checkout process. The store can be managed through the admin application. The entire app (and dev environment) is containerized.

Category page for shoes. Sneakers and sandals are listed.Storepage for a pair of sneakers with multiple images of the sneakers.Ordering page where the user is selecting a postal delivery point.

The store

The style is this cartoonish "hand-drawn" look with all of the content in rounded and shadowed boxes. I decided to go with MUI as the frontend framework, because at the time I wasn't comfortable with pure CSS. MUI also looked really clean and proved to be easy to use. The store supports multiple languages (Finnish & English). The store browser supports pagination, but I don't have enough items on sale for it to be apparent.

The admin application

The admin app uses the same tech as the store itself, but doesn't have as much focus on style. Admins can add/modify/delete items, categories and accounts.

Admin tools with product modification modal.Admin tools with cateogry modification modal.

The backend

It's a node + express setup. The backend uses GraphQL for communication and stores all data in MongoDB. Authentication is implemented with JWTs.

Conclusions

This project required way more time than I initially expected. I would say the biggest time-sinks were trying to containerize the app the first time (when I didn't have much experience with Docker), and figuring out file uploads to the server and syncing them when starting a new instance.


Overall I'm very happy with how the backend works, but the frontend could use a little touch-up. The whole project isn't really "production ready", but as a hobby project I think it's great!