🛒 DevStore

DevStore is an application focused on ecommerce, with some small functionalities created to show the use of some of next's important features.

Preview

Features

• 📝 Github Actions with Cypress
• 📝 Connection to external product API
• 📝 List of featured products
• 📝 Product details
• 📝 Search by product

Technologies

• 🔥 NextJS - Application SPA
• 🔥 TypeScript - Static typing
• 🔥 Eslint - For linting
• 🔥 Tailwind - Styling
• 🔥 Zod - Validation data format
• 🔥 Lucide React - Iconography
• 🔥 Cypress - For end-to-end testing

Important technical points

• ⚙️ All featured products was statically generated to improve detail page
• ⚙️ Products that are not featured are dynamically generated because they do not have much access as those that are featured
• ⚙️ When you are waiting for a product, a skeleton is displayed to improve the user experience
• ⚙️ All component that use client resources have been componentized to optimize the usage of server components

Installing

  // First you have to clone the projecto into your wokspace
  git clone https://github.com/avilyre/dev-store

  // Install all dependencies with npm or your favorite package manager
  pnpm install

⚠️ Now you have to setup the environment variables. You can find an example file in the project root

  // That is it, run the project
  pnpm run dev

You can view the project at the address displayed in the terminal

Testing

Cypress was used for testing and it's simple to run it

  // Running application's tests
  pnpm cypress run
  // or
  // Running cypress's ui testing
  pnpm cypress open

Developed with 💙 by [email protected]