matheuspaolini/hype-acme-inc-react-app

Hype Acme Inc. React App

🚀 Technologies

• React
• TypeScript
• Stitches
• Jotai

💻 About the project

Frontend application simulating an e-commerce app. All the data is generated and stored on client-side.

I'm not using a Design System to demonstrate my capabilities to create reusable components with TypeScript.

Images provided by Lorem Picsum;

📥 Running the project

$ git clone https://github.com/matheuspaolini/hype-acme-inc-react-app.git && cd hype-acme-inc-react-app

# Install dependencies
$ npm install
#or
$ yarn

# Running project in development mode
$ npm run dev
#or
$ yarn dev

# Running project in production mode
$ npm run build && npm run preview
#or
$ yarn build && yarn preview

🧱 Project Structure

• Domain

  • App entities interfaces, such as product, cart, and checkout.
  • App business rules, contains all the independent logic implementation.

• Application

  • Contains the Jotai store/atoms that implements the business rules on domain layer.
  • A factory function to generate the mocked produc list.
  • Utils folder with encapsulated functions to make easier to create the product list.
  • Also the 'Acme Inc Http Get Client', a mocked http client to simulate getting the product list from an external API.

• Data

  • Contains hardcoded data.

• Presentation

  • Hooks.
  • Components.
  • Feature components (separated sections placed inside each page).
  • Layouts (essential components to create the App layout).
  • Pages.
  • Styles configuration and setup.
  • Utils, such as price formatter, and open in new tab functions.

• Main

  • App Router -> React Router
  • App file entry point (index.tsx).