Sample E-Commerce Store
Overview
This project is a small e-commerce website that I created for a friend who needed a lightweight online shop solution. The goal was not to build a large-scale production-ready commerce platform, but rather to create a simple and accessible website that allowed products and information to be presented in a clean and usable way.
The application was built using modern web technologies and combines a React frontend with backend and cloud services. While the scope of the project remained intentionally small, it became a practical exercise in structuring a full-stack web application and connecting multiple services together.
In retrospect, the actual business requirements were much simpler than initially expected. A large part of the workflow could probably have been solved through a Microsoft Outlook calendar integration combined with a lightweight frontend interface. Nevertheless, the project became a valuable opportunity to experiment with frontend development, deployment pipelines, and cloud integrations.
Motivation
A friend needed a small webshop-like platform for organizing and presenting products and availability online. Instead of using an existing website builder, I decided to create a custom solution as a small side project.
At the time, I mainly wanted to gain more hands-on experience with:
- ·React frontend development
- ·backend integration
- ·cloud deployment
- ·authentication and database tooling
- ·structuring a small full-stack application
The project also served as a learning experience for understanding where custom software is actually useful and where existing tools may already solve the problem sufficiently well.
One interesting realization from this project was that software engineering is not only about building systems, but also about correctly identifying the actual user needs. Looking back, the final requirements could likely have been covered with significantly less complexity using existing Microsoft ecosystem tooling packaged in a cleaner way.
Technical Approach
The application was designed as a lightweight full-stack web application with a clear separation between frontend, backend, and cloud services.
The frontend was implemented using React and focused on simplicity and usability. Backend functionality and persistence were connected through external services and cloud integrations instead of implementing a large monolithic backend architecture.
The project used:
- ·React for the frontend UI
- ·Node.js services
- ·Supabase for backend/data functionality
- ·Google Cloud services for hosting/infrastructure-related functionality
The goal was to keep the architecture relatively simple while still experimenting with a modern web stack.
Architecture
The overall architecture followed a lightweight client-service structure:
The frontend handled:
- ·rendering products/pages
- ·user interaction
- ·navigation
- ·communication with backend services
The backend/cloud layer handled:
- ·persistence
- ·data access
- ·deployment/infrastructure concerns
The architecture intentionally avoided unnecessary complexity due to the relatively small project scope.
Challenges
One of the main challenges of the project was balancing simplicity with flexibility. Since the original requirements were relatively lightweight, it was important not to overengineer the solution while still building something maintainable and extensible.
Other challenges included:
- ·integrating multiple technologies cleanly
- ·deployment and cloud configuration
- ·structuring frontend components
- ·handling evolving requirements
- ·deciding which functionality actually needed custom implementation
An important learning from this project was understanding that technical complexity should always be justified by actual user needs. In hindsight, some parts of the architecture were likely more sophisticated than necessary for the problem being solved.
System Design
The system was designed around a lightweight web application architecture:
Core Components
Frontend
- ·React-based user interface
- ·product presentation
- ·navigation and interaction
Backend/API Layer
- ·lightweight service layer
- ·communication between frontend and persistence
Persistence / Cloud
- ·Supabase integration
- ·cloud-hosted infrastructure
- ·deployment services
The project focused more on practical integration and experimentation than on implementing highly advanced commerce functionality.
Future Improvements
If I were to redesign the project today, I would likely simplify the architecture significantly and focus more heavily on:
- ·reducing operational complexity
- ·using existing SaaS tooling where appropriate
- ·improving maintainability
- ·improving responsiveness and UI polish
- ·simplifying deployment and administration
Potential future improvements could include:
- ·improved mobile responsiveness
- ·better admin/product management
- ·calendar integration
- ·simplified booking/workflow handling
- ·improved authentication flows
- ·migration to a more modern Next.js architecture
- ·static generation for improved performance
Another interesting direction would be transforming the project into a much more lightweight scheduling and presentation platform rather than treating it as a traditional webshop.