marinapsvreis / next-finance-dashboard

https://next-finance-dashboard-acnoacq5c-marinapsvreis.vercel.app

How to run this project:

• You need to clone this repository
• Run npm install
• Configure .env with 3 variables: DATABASE_URL, DIRECT_URL, SESSION_SECRET.
• Run npm run dev

Used techs:

• Next.js (Pages router)
• Typescript
• React Hook Form
• Yup
• React Select
• Styled Components
• Phosphor icons
• React toastify
• Prisma
• PostgreeSQL (from Supabase)
• Js Cookie
• Jose
• Bcrypt
• Highcharts

Todo List for this project:

Done:

• Page to login
• Page to register
• Page to see dashboard
• Config styled components with Next.js
• Config prisma with PostgreeSQL
• Connect to supabase
• API Route to Login
• API Route to Register
• JWT Authentication
• Validate form fields
• Implement toast alerts
• API Route to get filters list (dates, industries, accounts and states)
• API Route to get some data insights from transactions.json
• API Route to verify token
• Private /dashboard route based on Cookie with valit JWT Token
• Sidebar (Home + Active Route)
• Logout feature
• Mock data to build dashboards and cards (Highcharts)
• Responsive design (without Sidebar and logout)
• Button to go register on login screen
• Button to go login on register screen
• Update README to run project
• Vercel deploy
• Implement dashboards with real data from API routes
• Implement filters state to see dashboards (date, account, industry and state)

Pending:

• Add token to dashboard requests
• Adujust monthYear legend in line chart.
• Sidebar responsive
• Save in local storage filter config by user
• Use layout Next feature to improve screens
• Implement some animations to wait loading API Requests
• Unit tests
• Cache Next.js