A modern skateboard e-commerce web application built with React and a Node.js backend, focusing on responsive UI, clean architecture, and scalable backend design.
The application provides a complete shopping experience including product browsing, filtering, cart management, authentication, and order flow, with production-ready infrastructure and performance optimizations.
- Frontend: Netlify
- Backend API: Render
- Database: MongoDB
- Caching Layer: Redis
- Media Storage: Cloudinary
The project is split into two independent layers:
- Frontend → Handles UI, UX, routing, and client-side state
- Backend → Provides REST APIs, authentication, cart management, and caching
Each layer can be deployed and scaled independently.
- Responsive navigation for desktop and mobile
- Mobile hamburger menu with full-screen drawer
- Desktop layout remains minimal and uncluttered
- Smooth CSS-based animations
- Product listing with grid and list views
- Product detail pages with images, pricing, and stock info
- Images served via Cloudinary CDN
- Responsive product layout using CSS Grid
- Search by product name
- Filter by category, brand, color, and price range
- Sorting by price and name
- Filter logic handled via Context API
- Mobile-friendly collapsible filters
- Guest cart stored in local storage
- Authenticated user cart persisted in MongoDB
- Automatic cart synchronization on login
- Cart cleared on logout
- Cart quantity and pricing calculated in real time
- Custom authentication using JWT
- Secure login and signup APIs
- Protected routes using auth middleware
- Token-based session management
- RESTful APIs built with Express
- MongoDB schema design using Mongoose
- Redis used for caching frequently accessed endpoints
- Rate limiting added to protect APIs
- Environment-based configuration
- Product images uploaded to Cloudinary
- Only image URLs stored in MongoDB
- Faster delivery using Cloudinary CDN
- Reduces backend storage and bandwidth usage
- React
- React Router
- Redux Toolkit
- Context API
- Styled-Components
- React Icons
- Node.js
- Express.js
- MongoDB
- Mongoose
- Redis
- JWT Authentication
- Rate Limiting Middleware
- Netlify (Frontend hosting)
- Render (Backend hosting)
- MongoDB Atlas
- Redis
- Cloudinary
- Clear separation of frontend and backend
- Stateless backend APIs
- Redis used to improve response times
- CDN-based image delivery
- Scalable deployment setup
Backend requires the following environment variables: