Dive into Frontend Development with Shadcn UI and Next.js

Welcome to my course project for the comprehensive course on frontend development using Shadcn UI in Next.js, instructed by Tom Phillips on Udemy. This project is a demonstration of my learning as a student in this course, designed to showcase the skills in creating state-of-the-art dashboards.

Project: "SupportMe" Dashboard

"SupportMe" is a fictional dashboard that efficiently tracks employees, teams, and customer support tickets, developed using Shadcn UI within the Next.js framework.

Project Setup

To get started with the "SupportMe" project, follow these setup instructions:

1. Clone the Repository

• Clone this repository to your local machine using git clone <repository-url>.

2. Install Dependencies

• Navigate to the project directory and run npm install to install the necessary dependencies.

3. Start the Development Server

• Run npm run dev to start the Next.js development server. The project will be available at http://localhost:3000.

4. Build for Production

• To build the project for production, use npm run build.
• After building, you can start the production server with npm run start.

5. Linting and Formatting

• Ensure code quality and consistency by running npm run lint for linting and npm run format for formatting the codebase.

6. Pre-commit Hooks

• Husky is used for managing pre-commit hooks. Run npm run prepare to set up Husky.

Why This Course Was Chosen?

• Focused Learning Path: I focused on building visually appealing, interactive dashboards. This helped me gain proficiency with in-demand frontend technologies.
• Hands-On Shadcn UI & Next.js: I learned to utilize Shadcn UI within the Next.js ecosystem to create fast, server-rendered React applications.
• Forms and Validation with Zod: I mastered form creation using react-hook-form and implemented client-side validation with Zod to ensure data integrity.
• Extendable Components: I enhanced my ability to customize Shadcn UI components to meet the unique requirements of the projects.
• Styling with Tailwind CSS: I adopted Tailwind CSS's utility-first approach for efficient, in-line styling.
• Interactive Charts with Recharts: I integrated dynamic, responsive charts using Recharts to add visual appeal to data presentations.

Project Focus

This project is strictly focused on frontend development using hardcoded/dummy data. It simplifies learning by omitting backend complexities such as databases or authentication systems. This approach allowed for a pure, undistracted dive into frontend excellence.

Who Would Benefit From This Course?

• Aspiring Web Developers: Perfect for those who wish to learn efficient UI building techniques using Shadcn UI and Next.js without starting from scratch.
• Experienced Developers: Ideal for developers looking to enhance their frontend skills and learn new, modern approaches to web development.

This project is a testament to the skills and knowledge I've acquired as a student in this course, and I am excited to apply these in my future web development endeavors.