Nova - eCommerce Store
Modern eCommerce built with Next.js
A fully functional online store with product browsing, cart management, and checkout functionality.
My Role in the Project
Nova was developed as a course assignment to learn React and Next.js fundamentals. I was responsible for building the entire eCommerce platform from scratch, including:
- Frontend Development: Built the complete user interface using Next.js and React, implementing all required pages and functionality from the course brief.
- API Integration: Connected the application to the Noroff eCommerce API to fetch and display product data dynamically.
- State Management: Implemented cart functionality using React state, managing product additions, removals, and checkout flow.
- Form Validation: Created comprehensive contact form with validation for all required fields including email format validation.
- Responsive Design: Ensured the application works seamlessly across all device sizes using CSS Modules and responsive design principles.
- Creative Enhancement: Added animated color blobs to the product carousel for visual appeal beyond the basic requirements.
This project served as my introduction to React ecosystem and modern web development practices.
Technical Challenges
-
Learning React Fundamentals: Mastering React concepts like components, state management, and props while building a functional application from scratch.
-
Next.js Framework: Understanding Next.js routing, file-based routing system, and deployment optimization for the first time.
-
Cart State Management: Implementing persistent cart functionality that maintains state across different pages and handles product additions/removals correctly.
-
API Data Handling: Learning to fetch, process, and display data from external APIs while handling loading states and potential errors.
-
Form Validation Logic: Creating robust form validation that provides clear user feedback and prevents invalid submissions.
-
Vercel Deployment: Learning deployment processes and understanding how to optimize the application for production environments.
Features
Product Catalog: Browse all products with detailed information, images, and pricing including discount calculations and display.
Search Functionality: Look-ahead search bar that filters products in real-time as users type product names.
Shopping Cart: Add products to cart, view cart contents, calculate totals, and proceed through checkout process.
Individual Product Pages: Detailed product views with descriptions, reviews, pricing, and add-to-cart functionality.
Contact Form: Fully validated contact form with required field validation and email format checking.
Animated Elements: Custom animated color blobs in the product carousel for enhanced visual appeal.
What I Learned
-
React Fundamentals: Gained solid understanding of React components, state management, props, and the component lifecycle.
-
Next.js Framework: Learned Next.js routing system, file-based routing, and the benefits of server-side rendering for eCommerce applications.
-
State Management: Understood how to manage application state effectively, particularly for cart functionality and user interactions.
-
API Integration: Learned to work with external APIs, handle asynchronous data fetching, and manage loading states.
-
Vercel Deployment: Gained experience with modern deployment platforms and understanding of production optimization.
-
Form Handling: Mastered form validation techniques and user experience considerations for data collection.
Future Improvements
-
Enhanced Animations: Expand the animated elements beyond the carousel to create a more dynamic and engaging user experience throughout the site.
-
Advanced Filtering: Add category filters, price range sliders, and sorting options to improve product discovery.
-
User Accounts: Implement user registration and login functionality with order history and saved preferences.
-
Payment Integration: Add real payment processing capabilities using services like Stripe or PayPal.
This project provided an excellent foundation for understanding modern React development and eCommerce functionality.
Explore Nova
Experience the eCommerce platform or explore the Next.js and React implementation on GitHub.