- Server side rendering using remix
- Styling using styled components
- Managing application state (dark/light theme) with context
- Unit testing with jest and react-testing-library
- Header component that is rendered on all pages with a button to change the dark/light theme and a button to go back to the index route
- Search page at route /search or / renders a search form that when submited redirects to /search/:searchQuery
- Search page at /search/:searchQuery (child route of /search) that renders on the server the first page of the matching github username results (100 results per page) and when the user scrols to the bottom of the page fetches the next page on the client side
- User page at /user/:username that renders on the server the user data and the first page of the user repositories (5 results per page) and when the user clicks the 'next page' button fetches the next page on the client side
- components: generic components to be reused across the application
- hooks: generic hooks to be reused across the application (usePagination for pagination logic and useTheme for consuming the Theme context)
- routes: Application pages per route ( /search: Search.tsx, /search/:searchQuery: Search/$searchQuery.tsx, /user/:username: User/$username.tsx )
- sdk: Functions that fetch the github api and return the needed result
- test-utils: Test utility functions
- theme: dark/light theme variables and shared theme variables (medias, colors, headerHeight)
From your terminal:
npm run dev
This starts your app in development mode, rebuilding assets on file changes.
First, build your app for production:
npm run build
Then run the app in production mode:
npm start