GitHub Explorer

Warning: This project was used to experiment and learn new libs, tools and services. Some parts of the code may not be production ready, and are definitely not optimized and/or over-engineered.

This is a simple app that allows you to search for GitHub repositories and bookmark them. This is a Next.js project bootstrapped with create-next-app.

This project was created as a code challenge for --redacted--.

Check it out live at https://github-explorer-lake-two.vercel.app/

Development

1. Install dependencies:

yarn

2. Rename .env.local.example to .env.local and add the required keys.

3. Run the development server:

yarn dev

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

Testing

Run the component tests:

yarn test

Run the E2E tests:

yarn test:e2e

Libraries & Tools

• Framework: Next.js
• Authentication & Database: Supabase
• Form: React Hook Form
• Validation: Zod
• Styling: Styled Components
• Headless UI Components: Radix UI
• Headless UI Components: Embla Carousel
• Async state management TanStack Query
• HTTP Client: Ky
• GitHub API Client: Octokit
• Testing: Jest, React Testing Library and Playwright

Supabase Setup

• Run all .sql files included in the /db folder, in the Supabase SQL Editor.
• Enable Insert & Delete replication for the bookmarks table (Database > Replication > supabase_realtime)
• Auto generate database types using the Supabase CLI

Deployment

This project is deployed to Vercel via GitHub integration. Make sure to add the required env keys to the Vercel environment variables.

Notes

My approach to code challenges

• I like to have a time limit for code challenges. I try to have a good balance between getting a good result and not spending too much time on it.
• I like to explore and learn new libraries and tools. I find that this is a good oportunity to learn and improve my skills, and always take something new with me regardless of the outcome. This may result in some code that is not production ready, or that I would not use in a real project, but I think it's worth it.

Decisions, Improvements & Others

• Tried out Supabase (a Firebase open-source alternative) for authentication and database (and some "exotic" features like realtime replication and row level security).
• Tried out Playright (a Puppeteer/Cypress alternative) for E2E testing.
• The homepage is public, but the bookmarks feature is private - meaning anyone can explore the repositories, but only authenticated users can bookmark them.
• The bookmarks are stored in the database.
• The bookmarks list "My Bookmarks", after the first load, is updated in realtime via Supabase's realtime replication. (for fun, this could just use local stage, but I wanted to try out the replication feature)
• The selected topics and the sorting of each topic are saved in local storage, individually.
• The api that provides the OpenGraph images for the repositories has a low rate limit, so behare of that.
• Improve error handling and feedback to the user.
• Improve responsiveness. Its usable on mobile, but not great. The bookmark feature depends on hover which is not available on mobile, so I ended up showing the bookmark toggle by default on mobile.
• Make UI components more generic and reusable
• Deployed to Vercel via GitHub integration
• Change the GitHub API client to use GraphQL to reduce data usage and improve performance
• Improve UX on the image loading, add a blur up effect or a placeholder. Or SSR.
• Add infinite loading (useInfinityQuery + page param + embla async) to the carousel, this is currently limited to 10 items.
• Improve tests (add more tests, improve mocks, e2e, etc)

License

MIT License