Try the project here!
This project is a GitHub Repositories Explorer built using the following technologies and development tools.
- React: The project uses React for building the user interface components.
- TypeScript: Enhances type safety and code maintainability throughout the codebase.
- @mui/material & @mui/icons-material: Leverages Material UI components for a consistent and beautiful design following Google's Material Design guidelines.
- React Query: Provides an easy and performant way to manage API calls and cached data within React components.
- octokit/rest: GitHub REST API client for JavaScript
- React Router: Handles client-side routing for the application, enabling navigation between different views. Used as a library due to simplicity.
- Vite: Used as the build tool, offering a fast and efficient development experience with hot module replacement.
- Storybook: Facilitates the development and visualization of isolated UI components.
- ESLint + Prettier & Husky: Enforce consistent coding style and run linting checks pre-commit for better code quality.
- Vitest + testing-library: For fast unit tests for Vitest + react applications.
- Playwright Provides end-to-end testing capabilities for simulating user interactions.
- GitHub Actions:
- e2e tests
- check, build and deploy to GitHub pages
- Clone the repository and run
npm ciin the project folder - Run
npm run devto start the development server - Open your browser and navigate to
http://localhost:5173/
Run npm test to execute the Vitest runner
Run npm run test:e2e to run the Playwright tests
- Add sorting to the github queries.
- Error reporting on Sentry or similar.
- Lighthouse score improvements: while the project gets a score of >90, improvements can be made to reach 100.
- Git: implement a branching strategy.
- Conventional commits + semantic release: for automatic semver versioning and meaningful commits.
- Storybook: deploy to server.
- Visual regression tests with @chromatic-com/storybook.