algife/portfolio__nextjs-tailwind-cars-api

Demo Portfolio Project using Next.js 14, React, Redux, React Hook Forms, consuming a third-party REST API, etc...

Next.js 14 demo

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:

Showcase:

What it includes:

• 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.
• 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

Getting Started

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.

Learn More

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!

Deploy on Vercel

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.