tonmanna/my-projects-dashboard

Next.js, Material UI, MongoDB Personal Dashboard with dev.to, GitHub, Twitter, and npm API integration.

Personal Dev Dashboard

The blog post with an overview of the development process.

Technologies used

Front-end

• Next.js - React framework
• TypeScript
• Material UI - React UI framework
• Recharts - charting library
• react-spring - animation library

Back-end

• MongoDB Atlas - cloud-hosted Mongo Database
• GitHub API
• dev.to API
• Twitter API
• npm API

---

Local development

1. Create .env.local file with the following environmental variables:

DEVTO_API_KEY=
GITHUB_PERSONAL_TOKEN=
TWITTER_BEARER_TOKEN=
TWITTER_USERNAME=
MONGODB_URI=
MONGODB_DB=
APP_API_KEY=

How to obtain API keys and tokens described in the blog post.

2. Run the development server:

npm run dev
# or
yarn dev

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