igoormichaeel / dashgo

A application of a admin panel developed at Rocketseat's Ignite ReactJS course using NextJS and TypeScript. In that app was used Chakra UI for the entire interface, ApexChartsJS for charts, MirageJS to mock out a API for the user listing and React Query for data fetching and data caching.

Dashgo

About this project

A application of an admin panel developed at Rocketseat's Ignite ReactJS course using NextJS and Chakra UI for the entire interface. This app contains an authentication page (but authentication not yet implemented), a static dashboard page with ApexCharts.js, and a user listing page where you can add and edit users.

For user management, MirageJS was used to mock out an API (mirage is a fake server that runs on the client and can be used in both development and testing, but a real API is needed to work in production). The APP is ready to receive a real API.

Finally, React Query was used for data fetching and data caching.

Technologies and tools

• ReactJS as library
• NextJS as framework
• TypeScript as programming language
• Chakra UI for the interface
• ApexCharts.js for charts
• MirageJS to mock out an API
• Faker to generate fake (but realistic) data
• React Query for data fetching and data caching
• React Hook Form for forms
• Yup for form validation

Demonstration

Dashgo.mp4

Getting Started

Requirements

To run this project in the development mode, you'll need to have:

• Git
• Yarn

Installing

On terminal, clone de repository and go to the directory

$ git clone https://github.com/igoormichaeel/dashgo.git
$ cd dashgo

And execute the following command to install all de dependencies:

$ yarn

Then, to runs the app in the development mode, execute:

$ yarn dev

Open http://localhost:3000 to view it in the browser.