Github Repositories Landing Page Challenge

The frontend web application is a Github clone developed with Next.js, Zustand, TypeScript and Tailwind CSS as core technologies. Its purpose is to display a list of repositories and their details based on a specific organization, in this case, Facebook. The application content data was consumed through the Github API Rest.

Table of content

• Deployment
• Features
• Settings
• Installation
• How to build
• Testing
• Project structure
• Scalability considerations
• Conclusion
• Contact
• Bonus
• License

Deployment

This app was deployed on Amazon S3 (Simple Storage Service) and Amazon Cloudfront.

Live Demo Link

• http://d40nwhaxs1dz1.cloudfront.net/?type=all

Features

Fetch and display repositories: The landing page fetches and displays a list of repositories from a specified Github organization.

Get type of repositories by url param: The type of repository to display can be defined using the parameter ?type=<"all" | "public" | "sources" | "forks" | "archived" | "template">

Navigate through repository types: You can navigate through the types of repositories using a sidebar on desktop and a navigation menu on mobile.

Paginate data per page: Each page is paginated by 30 elements per page, you can go to the next page or return to the previous one.

View each row by default mode or compact mode: Using a select element you can change the type of view of each row

Repositories data filter: You can filter the data of the repositories by <"created" | "full_name" | "pushed" | "updated"> and ascending or descending

Responsive design: The page is designed to be responsive and work well on various devices.

Clean and structured code: The solution is designed with modularity and reusability in mind.

Settings

If you want to run the app locally you need to config the environment variables as first step:

# Create a .env file in the project root with the following variables

NEXT_PUBLIC_API_URL=https://api.github.com
NEXT_PUBLIC_GITHUB_TOKEN=<your-github-token>
NEXT_PUBLIC_GITHUB_API_ORG=facebook
NEXT_PUBLIC_GITHUB_API_VERSION=2022-11-28
NEXT_PUBLIC_GITHUB_API_ACCEPT=application/vnd.github+json

These variables are mainly used for API authentication handling. Read more about Github API Rest Authentication.

Installation

• Prerequisites

For better performance I highly recommend you:

Node.js (v20.x or higher)

npm (v10.x or higher)

# Clon the repository
git clone https://github.com/cbasJS/frontend_challenge.git

# Go to the folder
cd github-clone-app

# Install the dependencies
npm install

# Run locally
npm run dev

How to build

# Compile the project
npm run build

# Run the server
npm reun start

Testing

Although optional, unit tests have been included to ensure code quality and reliability. Tests are located in the /tests directory and can be run with:

# Run all tests:
npm run test

# Run watch mode
npm run test:watch

# Run collect coverage
npm run coverage

Project structure

The structure of this application was made based on Clean Architecture and SOLID principles.

github-clone-app/
├── __tests__
├── app/
│   ├── application/
│   ├── domain/
│   ├── infrastructure/
│   ├── presentation/
│   ├── favicon.icon
│   └── globals.css
├── pages/
├── public/
├── .env
├── .env.template
├── .eslintrc.json
├── .gitignore
├── github-lang-colors.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── tailwind.config.js
└── tsconfig.json

Main folders and files

• tests: Contains unit tests.

• app/application: Zustand config for global state management.

• app/domain: TypeScript type definitions to ensure typed development and avoid common errors.

• app/infrastructure: Services for interaction with the Github API.

• app/presentation: Reusable React components for the UI.

• /pages: Contains the application pages, taking advantage of Next.js file-based routing.

Scalability Considerations

If this application needed to be scaled, here are some improvements that could be made:

1. Application Optimization

A. Server-Side Rendering (SSR) and Static Site Generation (SSG)

• SSR: Use Server-Side Rendering for pages that require dynamic data on each request.

• SSG: Use Static Site Generation for pages that do not change frequently, generating static pages at build time.

B. Minification and Compression

• Ensure CSS and JavaScript files are minified.

• Use gzip or Brotli compression to reduce the size of files sent to clients.

2. Traffic Management and Scalability

A. Horizontal Scalability

• Auto Scaling: Use Auto Scaling groups in AWS to automatically handle increases in traffic.

• Load Balancer: Implement a Load Balancer (Elastic Load Balancer) to distribute traffic across multiple instances.

B. Caching and CDN

• Caching in CloudFront: Configure cache policies in CloudFront to reduce load on the origin server and improve response times.

3. Monitoring and Maintenance

A. Monitoring

• Use monitoring tools like Sentry to monitor the application's performance.

• Set up Google Analytics to visualize key metrics.

B. Maintenance

• Perform regular stress testing to identify and address bottlenecks.

• Ensure regular updates of dependencies and security patches.

Conclusion

This project demonstrates the ability to create a functional, well-documented, and scalable web application. I hope you enjoy reviewing it as much as I enjoyed building it!

Contact

For any questions or further information, please contact:

• LinkedIn

Bonus

I created a small application with the MERN Stack for an authentication form. Please check the /auth-formulary folder to learn more.

License

This project is under the ISC License.