Code Commerce

This is a iterative project, starting with a simple landing page and ending with a full e-commerce site. It was built using React, TypeScript, Context API, and Commerce.js.

GitHub Website

Code Commerce: Full-Stack E-commerce Store

Overview

Code Commerce is a comprehensive full-stack e-commerce store project where developers can sell pre-built code projects and snippets. The project started as a React application and evolved into a full-stack system using React with TypeScript, integrating the open-source Node API CommerceJS for backend functionality.

Key Focus Areas

  • Forms and form validation with React
  • Building stateful components
  • Passing data between components
  • Working with APIs
  • Understanding and implementing TypeScript
  • Converting class components and implementing functional components
  • State management using React Context API
  • Using and understanding form and input management with React-Hook-Form
  • Implementing UI/UX with "Mobile-First" design principles

Features & Technical Implementation

  • User Authentication: Enabled users to sign up and log in, with advanced form validation and error handling.
  • Product Display & Search: Implemented a dynamic product display system with categorization and search functionality.
  • Customer Cart: Constructed an interactive shopping cart system, with item quantity adjustment and removal features.
  • Shipping Information: Implemented a shipping detail collection system with options for standard and express shipping.
  • Payment Information: Built a secure payment system that accepts all major credit cards and provides form validation and error handling.
  • Checkout System: Deployed a comprehensive checkout system with price summary, cart summary, shipping form, payment form, and confirmation page.
  • Error Handling: Introduced extensive HTTP and UI error handling systems.

Backend & API

  • Leveraged the open-source Node API, CommerceJS, to create backend functionality.
  • Developed a product database with various categories and items, each featuring an image, title, description, quantity, and price.
  • Integrated CommerceJS's API with the front end, fetching, and parsing product data for display in the UI.

Conclusion

Code Commerce showcases my abilities in building robust e-commerce applications, integrating APIs, implementing advanced functionalities, and providing a user-friendly interface. The evolution of the project from a simple React application to a full-stack solution using React and TypeScript demonstrates my growth and adaptability as a developer.