Sales dashboard

Features   |   Technologies   |   Requirements   |   Starting   |   Activities   |   References   |   License   |   Author

Demo

---

 

🎯 About

Design of a web application sales performance analysis dashboard with spring backend and react frontend, form the DevSuperior course.

✨ Features

✔️ Sales performance analysis dashboard listing;
✔️ Sales dashboard with statiscal charts;
✔️ Total sales search by seller - filling the donut chart;
✔️ Success rate search by seller - filling the bar chart;
✔️ Paged search of sales;
✔️ Detailed sales list;
✔️ API documentation with springdoc-openapi;
✔️ Frontend access with Netlify;
✔️ Database with Postgres;
✔️ Backend access with Heroku;

🚀 Technologies

The following tools were used in this project:

✔️ Java JDK 11;
✔️ Maven builder;
✔️ Spring Boot framework;
✔️ Spring Data JPA;
✔️ Swagger implementing springdoc-openapi;
✔️ Yarn - package management;
✔️ ReactJS user interfaces;
✔️ React Native;
✔️ TypeScript;
✔️ Bootstrap web framework;
✔️ Apexcharts.js library;
✔️ Netlify web app server;
✔️ Postgresql 12 database;
✔️ PgAdmin database administration platform;
✔️ Heroku - plataform as a service;

✅ Requirements

Before starting 🏁, you need to have Git, yarn and Java 11 installed.

🏁 Starting

# Clone this project
$ git clone https://github.com/jocile/sales-dashboard

# Access
$ cd sales-dashboard/frontend

# Install dependencies
$ yarn

# Run the project frontend
$ yarn start

The local frontend server will initialize in the browser: http://localhost:3000
and Dashboard URL route will be initialized in: http://localhost:3000/dashboard

# Access the backend server with the following
$ cd ../backend

# Run the backend interface with
$ ./mvnw spring-boot:run

The local backend server will initialize in the browser: http://localhost:8080/swagger-ui/index.html
and in-memory database H2 will be initialized in http://localhost:8080/h2-console

🏆 Activities

• ✔️ Created Git monorepo;
• ✔️ Created Frontend:
  • ✔️ Created static frontend look with Bootstrap and CSS;
  • ✔️ Create visual static components with ReactJS;
  • 📊 Create statiscal charts with apexcharts;
  • ✔️ Build the front end with Yard;
  • ✔️ Deploy the front end to Netlify;
• ✔️ Create the backend:
  • ✔️ Organized the project in layers with Spring Boot:
    • ✔️ Web, JPA, H2, Postgres and Security;
  • ✔️ Create REST Service;
    • ✔️ Create REST web services;
    • ✔️ DTO Standard;
  • ✔️ Create REST Repository (data access);
    • ✔️ Create entities;
    • ✔️ Database seeding;
    • ✔️ Associations between entities (N-N);
  • ✔️ Create REST controller:
    • ✔️ Swagger UI (Open API3 collections, environments);
    • ✔️ Data pagination with pageable, page, size, sort;
    • ✔️ Response from ResponseEntity request;
• ✔️ Frontend dynamically loading data from the backend;
  • ✔️ URL path route parameters;
  • ✔️ DonutChart request integration;
  • ✔️ BarChart request integration;
  • ✔️ DataTable request integration;
    • ✔️ props components pagination;
  • ✔️ frontend on Netlify making backend requests on Heroku

📚 References

• 📁 App documentation;
• 🔗 Bootcamp Documentation SDS 5 pt-BR;
• 🔗 Official Apache Maven documentation;
• 🔗 Spring Boot Maven Plugin Reference Guide;
• 🔗 Create an OCI image;
• 🔗 Spring Web;
  • 🔗 Building a RESTful Web Service;
  • 🔗 Serving Web Content with Spring MVC;
• 🔗 Spring Data JPA;
  • 🔗 Accessing Data with JPA;
• 🔗 Spring Security;
  • 🔗 Securing a Web Application;
  • 🔗 Enabling Cross Origin Requests for a RESTful Web Service
  • 🔗 Spring Boot and OAuth2;
  • 🔗 Authenticating a User with LDAP;
• 🔗 Tutorial: Intro to React;
  • 🔗 React Bootstrap;
  • 🔗 Upgrading React Router;
  • 🔗 Styled components in React;
• 🔗 TypeScript Documentation;

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by Jocile

 

Back to top