Logo Relancio Borges
All projects

↘ Case study · 2024

GitHub Dashboard

Authentication-focused GitHub dashboard experience built with Next.js

Animated project demonstration for GitHub Dashboard

The GitHub Dashboard project began as a way to deepen my knowledge of web authentication with Next.js. Its main goal was to integrate NextAuth.js, a powerful open-source library that simplifies full-stack authentication and supports providers such as GitHub and Google as well as credential-based authentication with email and password.

The system simulates the complete user registration and sign-in process, including GitHub OAuth authentication and local data persistence through json-server. It also provides a personalized dashboard for every authenticated user.

Key Features

  • Responsive Login and Registration pages.
  • GitHub OAuth authentication through NextAuth.
  • Simulated user registration and persistence with json-server.
  • Form validation with Zod and React Hook Form.
  • Authenticated sessions whose data is available in the dashboard:
    • Displays the simulated username, email, and password.
    • Supports signing out.
  • A dashboard styled with custom visual components.

Technologies

  • Language: TypeScript
  • Main framework: Next.js 14.1.0
  • Libraries and tools: NextAuth.js, Tailwind CSS, React Hook Form, Zod, Axios, json-server, and shadcn/ui.

Development Process

  1. Planning and prototyping

    I began by defining the page structure and layout. I used Excalidraw to sketch the login and dashboard interfaces, taking inspiration from modern UI and UX patterns.

  2. Technical implementation

    • Created the main Home, Login, Registration, and Dashboard routes.
    • Configured Tailwind CSS for responsive and accessible styling.
    • Implemented authentication with NextAuth.
    • Integrated json-server to simulate API requests.
    • Validated authentication forms with React Hook Form and Zod.
    • Conditionally rendered session data in the dashboard.

Notes

  • The project is entirely front-end, with local persistence through json-server.
  • Some inputs are disabled or do not have back-end actions because the focus was studying authentication and NextAuth sessions.
  • Not every GitHub API endpoint is used, but the architecture is ready for future expansion.