Carrotier - E-commerce shop

This repository contains the code for the E-commerce web application built using Next.js. The project utilizes various technologies and tools such as Husky, TypeScript, Redux Toolkit, ESLint, and Tailwind CSS.

Table of Contents

• Features
• Roadmap
• Prerequisites
• Installation
• Usage
• Technology Stack
• Folder Structure
• Acknowledgements

Features

• Home page: Lists products and links to navigate around the website.
• Cart: View/Edit/Delete cart items.
• Wishlist: View/Edit/Delete wishlist items.
• Filters: Filter products based on categroies.

Warning This website is a work in progress. So features will keep getting added as the development proceeds.

Roadmap

• navbar
• home page
• my cart
• my wishlist
• product detail page

Prerequisites

Before setting up the project, make sure you have the following installed on your machine:

• Node.js (version >= 16.14.0)
• npm (version > 7.0.0)

Installation

Installing Node.js and npm on Ubuntu

1. Update the package repository:

sudo apt Update

2. Install Node.js:

sudo apt install nodejs

3. Install npm ubuntu with the code below.

sudo apt install npm

4. Verify the installation by checking the Node.js and npm versions:

node --version
npm --version

Installing Node.js and npm on Windows

1. Visit the official Node.js website
2. Download the latest LTS version of Node.js for Windows.
3. Run the installer and follow the installation wizard.
4. After installation, open the Command Prompt or PowerShell and verify the Node.js and npm versions:

node --version
npm --version

Running project locally

To run this project locally, follow these steps:

1. Clone the repository using HTTPS:

git clone https://github.com/carr-o-t/carrotier.git

or

Clone the repository using SSH (if you have set up an SSH key):

git clone git@github.com:carr-o-t/carrotier.git

2. Navigate to the project directory:

cd carrotier

3. Install the dependencies:

npm install

Usage

To start the development server, run the following command:

npm run dev

Open your web browser and visit http://localhost:3000 to access the application.

while running the project locally, if you encounter the >following error, please consider upgrading your nodejs version.

showAll: args["--show-all"] ?? false,
                                        ^
SyntaxError: Unexpected token '?'
   at wrapSafe (internal/modules/cjs/loader.js:915:16)
   at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)

Technology Stack

• Next.js: A React framework for building server-rendered applications.
• TypeScript: A typed superset of JavaScript that enhances code quality and developer productivity.
• Redux Toolkit: A A powerful state management tool.
• ESLint: A pluggable JavaScript linter that helps identify and fix common code issues.
• Tailwind CSS: A utility-first CSS framework for building custom user interfaces.
• Shadcn UI: A collection of re-usable components built using Radix UI and Tailwind CSS.

Folder Structure

The project follows a common folder structure for a Next.js application:

• /components: Contains reusable React components.
• /app: contains pages route
• /public: Stores static assets such as images and fonts.
• /app/globals.css: Holds global CSS styles and Tailwind CSS configuration.
• /redux: Holds the app states.

Acknowledgements

• Next.js Documentation
• Tailwind CSS Documentation
• Shadcn UI Documentation