GitHub Mockup Website

☀️ Mock GitHub issue page from Front-End design to product

About GitHub Mockup

☑️ User can login and choose a repository

☑️ User can create / delete / edit comments, issues, and labels

☑️ User can search / filter issues, labels and assignees

• Developed with TypeScript, React, React Router v6, Tailwind and Styled Components for RWD layout, and CSS animation.
• Used Supabase to resolve OAuth login
• Used Context and useReducer to handle state management ( User registration and login state management )
• Used Firebase to deploy website and hosted App on Firebase server
• Connected to GitHub API to GET/PATCH/DELETE/POST user data by Octokit and researched official documents
• Built reusable code and UI components for future use and displayed on Storybook
• Supported Markdown in textarea by using Marked and Textarea-Markdown-Editor
• Supported pagination when issues are created over than 10 records
• Supported Responsive Web Design to adjust for different screen sizes and viewports automatically

Project Setting 📝

• API files store in service document
• Utils files store reusable function like calculate time and calculate random color
• Context files store user registration data and login state management
• Components files store reusable code and UI components like header, footer

Router Setting 📝

• Used React Router v6 that provides a declarative, component-based approach to routing and handles the common tasks of dealing with URL params, redirects, and loading data and provides one of the most intuitive APIs available and enables lazy loading and SEO-friendly server-side rendering
• Using nested routes and Outlet allows us to have a route that contains other child routes

Component Setting 📝

• Built reusable code and UI components for future use and displayed on Storybook
• Components like header, footer, dropdown list, button, and input search

Develop Tools 🔧

• React
• TypeScript
• React Router v6
• Tailwind CSS
• Styled Components
• Supabase
• Octokit
• Storybook
• Firebase
• Marked
• Textarea-Markdown-Editor

Demo 🌟

Login Page ☁️

• After login, user can choose a repository and show issues
• Selected repository and user name will show on http url

Label Page ☁️

• User can create / edit / delete a label
• User can choose random color or select color from colorboard

IssueList Page ☁️

• User can filter and search issues
• User can click dropdown list to mutiple search
• User can clear all search params
• All dropdown list support keywords search
• If there is 0 records to display that will show no result page
• Supported pagination when issues are created over than 10 records

NewIssue Page ☁️

• User can create a new issue
• User can assign collaborator or assign yourself
• User can add or delete a label from sidebar
• Supported Markdown in textarea with Marked and Texarea-Markdown-Editor

IssuePage ☁️

• User can create / edit / delete a comment
• The comment box will show defferent color according to owner or collaborator

RWD Layout ☁️

• Supported Responsive Web Design to adjust for different screen sizes and viewports automatically

Future Feature 🔜

• Add timeline to record user event on issuepage
• Can select page on issuelist page