Welcome to my Dashboard!

💡 Motivation

I was interested in building a full stack dashboard. I went with building the frontend with Chakra UI and Next.js. I also wanted to start learning about databases, so I chose to integrate it with a MongoDB database and build out a simple REST API. I learned a lot about MongoDB, user authentication in Next.js with next-auth, and developing a REST API in this project.

Feel free to reach out to me if you have any additional questions. There are lots of features that still need to be implemented!

✨ Pages

1. Home Page:
   

2. Analytics Page:
   

3. Dashboard Page:
   

4. Projects Page:
   

5. Team Page:
   

⚡️ Technologies

This site was built using Next.js and Chakra UI in the frontend.

The backend consists of a MongoDB database.

Why Next.js?

Vercel make it really easy to deploy a website for free. In addition, I love the routing system and SEO benefits that Next.js offers. Next.js also makes it easy to work with API's!

The next time I do another project, I'm definitely looking forward to using TypeScript with Next.js!

Why MongoDB?

MongoDB has a free tier, in addition to being flexible and fast. I didn't want to use a relational database, knowing that I might modify the document structure.

Here is a simple diagram showing how databases can be connected to a Next.js web app:

API Routes

• /api/auth to set up next-auth
• /api/customers to fetch mongodb data

Important Libraries

• mongodb
• chart.js
• styled-components

New Improvements

1. Wrap app with session tokens. Now the api routes and dashboard are protected!
2. Use api endpoints in client side components. I now fetch the data in the analytics page not with getServerSideProps, which was slow, but directly with a GET request from my API!
3. Removed package-lock.json now that I am using yarn to avoid future confusion and possible consistency issues.

Future Improvements

1. Develop MongoDB or mongoose schema.

👏 Contribute

Contributions are welcome as always. Before submitting a new pull request, please make sure to open a new issue.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.