Git Notes

An easy and better way for managing GitHub Gists

 

Tech Stack

• React with TypeScript
• Material-UI as component library
• Firebase for authentication
• Redux for state management
• RTK Query for data fetching and caching
• Nx for monorepo tool

Features

• List Public Gists: Allow users to list recently updated public gists in card and grid view
• Gist Details: Allow users to see a detail view of individual gist
• List User Gists: Allow users to list authenticated user gists
• List User Starred Gists: Allow users to list authenticated user starred gists
• Gist Creation: Allows users to create new gists with multiple files

Code Guidelines

• Code is organzied by features and file types
• Code is co-located by feature as possible for maintainability and ease of use
• Componenets that are used by multiple features are placed in components folder
• Using kebab-case for folder, file and components naming convention
• Using camelCase for function and variable naming

Required Setup

• Github OAuth App
• Firebase setup for authentication using GitHub provider

Run Tasks

To run the dev server for your app, use:

npx nx serve git-notes

To create a production bundle:

npx nx build git-notes

Project Structure

Overview of the project's directory structure:

├── src
│ ├── app
| ├── assets
| ├── components
| ├── feature
| ├── layouts
| ├── pages
| ├── providers
| ├── redux
| ├── routing
| ├── services
| ├── theme
| ├── utils
| ├── main.tsx
| ├── styles.scss
├── project.json
├── README.md
└── tsconfig.base.json
└── vite.config.ts

Deployment

• Deployed using Netlify
• See env variables from .env.sample