ReactJS Boilerplate with Vite - Hostfully test

This is a ReactJS boilerplate project configured with Vite for quick and easy setup of your React applications. It includes various development tools and libraries to help you get started with building modern React applications. Below you'll find instructions on how to get started with this project and an overview of the technologies used.

Getting Started

Follow these steps to set up and run the project on your local machine:

  • git clone
  • pnpm i / npm i / yarn (I strongly recommend pnpm)
  • pnpm run json-server in a terminal
  • pnpm run dev in another terminal

Project Structure

The project is organized with the following key directories:

  • src/App.tsx - root component to include new routes
  • src: Contains your application source code.
  • src/components: all the components used across the application.
  • src/hooks: all the functions to encapsulate logic that can be reusable
  • src/store: Contains Redux store configuration and slices.
  • src/pages: Pages Components for the application.
  • src/models: Types and interfaces.
  • src/stories: Documentation for components.
  • src/cypress: Folder to define all e2e or unit tests
  • src/utils: functions that can be helpful
  • src/api: well, there are some files to help performing requests with axios

Technologies Used

  • Typescript
  • React: A JavaScript library for building user interfaces.
  • Vite: A fast, opinionated build tool for React and other JavaScript frameworks.
  • Redux Toolkit: A set of tools to simplify Redux development.
  • React Router DOM: For declarative routing in the application.
  • Styled-components: For writing CSS in JavaScript for component styling.
  • Axios: A promise-based HTTP client for making API requests.
  • React Icons: A library of popular icons for React applications.
  • React Dates: A flexible date picker library for React.
  • Moment: A library for parsing and manipulating dates and times.
  • React Toastify: A toast notification library for React applications.
  • React Spinners: A collection of loading spinners for React.
  • Storybook: A development environment for UI components.
  • Cypress: An end-to-end testing framework for modern web applications.
  • JSON Server: A fake REST API server for mocking API requests.

Notion with documentation