Code Monkey home page Code Monkey logo

e-comm-sample's Introduction

A Next.js Tailwind Storybook E-Commerce Sample

Description

This is a simple e-commerce sample frontend app built with React and Next.js.

Technologies

Getting Started

Prerequisites

Installation

1. Clone the repository

git clone https://github.com/bjornet/e-comm-sample.git
cd e-comm-sample

2. Install dependencies

npm install

Development

IMPORTANT! This app is not ready for production.

Yey, now you can run the app locally!

Start the development server

Run npm run dev to start the development server.

Component Testing

Run npm run storybook to boot up Storybook and start developing components in isolation.

Linting and Formatting

Linting: Run npm run lint to identify and fix linting issues. Formatting: Run npm run format to format your code using Prettier.

Building

Production Build

Run npm run build to build the app for production to the dist folder.

High Priority Improvements

  1. Cart The cart is not fully implemented. The cart should be able to add and remove items.
  2. RSC The app is not making use of React Server Components. This would be a great fit for the app since it is a good candidate for SSR. This would improve the performance of the app as well as get rid of hard to manage hydration issues.

Other Improvements

  1. Stability The codebase would gain a lot from adding a pre-commit hook that runs a baseline of tests and linting. This would ensure that the codebase is stable and consistent. Husky and lint-staged would be a great fit for this.
  2. Error Handling The app is missing error handling. This is a must for a production ready app. The app should handle errors from the API and display a user friendly error message.
  3. Accessibility The app is missing accessibility features. This is a must for a production ready app. The app should be accessible for all users.

e-comm-sample's People

Watchers

Björn Christensson avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.