NoCap Internet Shop – React & FastAPI
Published on March 2, 2025
Developing the NoCap shop was an exciting challenge. This was my first time building a full-fledged React-based online store from scratch, integrating backend logic with FastAPI, and ensuring a seamless shopping experience.
Technologies and Frameworks
| Component | Technology Used |
|---|---|
| Frontend | React + Vite |
| Backend | FastAPI (Python) |
| Database | PostgreSQL |
| Payments | Stripe |
| Reverse Proxy | Nginx |
UI/UX Design Decisions
Product Card Design
The product cards are simple and user-friendly, showing the product image, title, price, and an “Add to Cart” button for a smooth purchasing experience.
Filtering and Sorting
React manages state-based filtering, allowing users to sort products by category, price, or name dynamically.
Product Recommendation Algorithm
Using collaborative filtering, the platform suggests products based on past user interactions, helping customers discover relevant items.
Stripe Payment Integration
The backend creates a checkout session via the Stripe API. The frontend then redirects users to a secure Stripe-hosted page. After payment, users are redirected back to the site.
Performance Optimization
- Lazy loading: Product images load only when needed, reducing initial load time.
- Code splitting: Minimizes JavaScript bundle sizes for faster rendering.
Backend Setup
Install Dependencies
pip install -r backend/requirements.txt
Run the Application
uvicorn backend.main:app --reload --host 0.0.0.0 --port 8000
API Endpoints
| Endpoint | Method | Description |
|---|---|---|
| /caps | GET | Get all caps |
| /cap/{cap_id} | GET | Get cap by ID |
| /add_cap | POST | Add a new cap |
| /create-checkout-session | POST | Create a Stripe checkout session |
Frontend Setup
Install Dependencies
npm install
Run Development Server
npm run dev --host --port 5173
Build for Production
npm run build
My Recommendations
- Improve SEO: Implement proper meta tags and structured data to enhance search visibility.
- Enhance Security: Use HTTPS, implement rate-limiting, and regularly update dependencies.
- Optimize Performance: Implement server-side caching for frequently accessed pages.
- Improve UX: Add animations and a progress indicator for checkout to enhance the user experience.
- Expand Payment Methods: Support more payment options like PayPal, Apple Pay, and Google Pay.
Conclusion
The NoCap shop was a great learning experience, from setting up a full-stack e-commerce platform to handling payments and optimizing performance. The combination of React, FastAPI, and PostgreSQL provides a scalable and efficient solution. If you’re interested in building a similar platform, let’s connect!
Japalandia work abroad Landing Page
Football Academy site example
Model Agency site example
