Publicly available at this website
This is a Next.js 14 project bootstrapped with create-next-app
and it makes use of different technologies and patterns such as:
- TypeScript
- Next.js 14
- Third-party API data fetching (RapidAPI - Cars)
- Use Params inheritance in functional components.
- Routing
- Regular routes
- Url param's routes such as
[query]
and[id]
- Grouped Routes (e.g.
(users)
)
- Create Custom Hooks
- Data fetching techniques (ISR, SSR, SSG)
- Server components
- Client components when user interaction is needed
- Server Actions
- Image preloading
- Fetching data with preloading
- Params fetching:
- Using dynamic params (
/(users)/catalog/[id]/page.tsx
) -- Although cars doesn't have an specific id provided by the server. - Using router prefetching.
- Using dynamic params (
- Redux State Management replacing the useState React Hook.
- Authentication & Authorization
- Using Context API
- Next.js built-in reserved-keyword pages such as:
page.tsx
,layout.tsx
- custom error pages using
error.tsx
- Custom Not Found page using
not-found.tsx
- loading placeholders using
loading.tsx
or the<Suspense fallback={/*...*/}>
component. - loading status bar indicating progress during the search.
- Customized the html page titles using Metadata rather than
head.tsx
. - Build and Deployment
- Using BEM naming convention for CSS class names
- Version Control (Git) and Git flow.
- Search Functionality:
- use React Hook Forms (RHF)
- update search results on input changes
- use debounce/throttling to reduce amount of API requests
- Create Custom Filtering Capabilities
- Frictionless search experience with auto fill inputs on direct URL search query and query parameters parsing with partial matching.
- Combobox Autocomplete Suggestions with Headless UI to suggest manufacturer.
- Modal box / Dialog to display search result details
- Inherit props from the form from parent to children.
- Using Metadata for SEO purposes
- Responsive Design
First, run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.