Case Study: StockOptima


About the project

A full-stack Inventory management application that allows users to create products displayed in a table layout with search and filter functionality, a stats page to give you a breakdown of all your products, and a profile page where you can update your name, profile image, and email address.

Technology used

I used React as my frontend framework and Tailwind CSS for styling. I utilized headless UI for dropdown menus, React Toastify for notifications, React Router for frontend routing, Axios for cleaner network requests, and Recharts (a React abstraction of D3) for creating visually appealing charts. For the backend I used Node and Express. I used MongoDB as a database and Mongoose for creating my schemas. JWT (json web token) for authentication and bcrypt for password hashing. I also used Cloudinary for profile image upload and helmet for web security. I also tested my backend routes with Postman. I used Render for hosting and Git and GitHub for version control. I used Vite as my build tool.

Concept and Creation

Why I created it

Part of why I started my journey into learning programming is my experience working in retail, where I had to use a lot of old, confusing, and obtuse software with unintuitive user interfaces. This sparked the idea that I could create more intuitive solutions myself. So, this project is me creating the inventory management system I wish I had.

Functional and Design requirements

Functional requirements

StockOptima data model

Design requirements

Design stuff used

Typography
Colors

Design Inspiration

Landing Page Inspiration

Landing page inspiration

Dashboard Inspiration

Dashboard inspiration

Filter in dashboard Inspiration

Filter in dashboard inspiration

Stats Inspiration

Stats inspiration

Results

What I learned

In my last project I didn't model the data so in this project I decided to create a data model and focus more on pre-planning which saved me time in the long run and helped me know more explicitly what I was going to do. The main challenge in this project was learning backend technologies like Node, Express and JWT, implementing custom middleware for stuff like authentication and image upload, putting it all together, and implementing the MVC pattern in my app. Overall I'm very happy with the progress I made and what I learned and I can't wait to learn even more in the future!

Even more info

If you want to see screenshots for every page of my app or some extra miscellaneous images, such as all the backend routes in Postman, you can visit the repository wiki linked below. The live site can take up to 30 seconds to initially load because I'm using a free instance to host stockOptima.

Repository Wiki Link Link to repo Link to live site