Prerequisites

Before running the project, ensure you have the following installed:

• Node.js

Installation

1. Clone the repository:

   git clone https://github.com/nishkarsh25/NEXTJS-ShadcnDarkMode.git
   

2. Navigate to the project branch:

   git checkout <branch-name>
   

   Replace <branch-name> with the name of the branch you want to checkout.

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev
   

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. 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.

How to Use

Light/Dark Mode Toggle

• Description: Users can switch between light and dark themes to suit their preference.
• How to Use: Click the theme toggle button in the navigation bar. The icon will change between a sun (for light mode) and a moon (for dark mode), indicating the current theme.

Shadcn UI Integration

• Description: The project uses Shadcn UI for custom-styled buttons and other UI components.
• How to Use: Components from Shadcn UI are pre-configured in the project. The theme toggle button, for instance, is styled using Shadcn UI's button component.

Responsive Navigation Bar

• Description: The navigation bar is responsive and includes links to different sections of the application along with the theme toggle button.
• How to Use: Navigate through the application by clicking the links in the navigation bar (e.g., Dashboard, Users, Tickets). The navigation bar will adjust its layout based on the screen size.

Next.js Server-Side Rendering

• Description: Efficient server-side rendering and static site generation are handled by Next.js.
• How to Use: No additional steps are required by the user. This feature ensures that the application loads quickly and performs well.

TypeScript

• Description: Ensures type safety throughout the application, reducing bugs and improving developer experience.
• How to Use: Developers can write TypeScript code, which will be type-checked during development. TypeScript configuration is already set up in the project.

Theme Management with next-themes

• Description: Seamless theme management is provided by the next-themes library.
• How to Use: The theme management is integrated into the ToggleMode component. Users can change themes using the toggle button, and the selected theme is remembered across sessions.

Contributing

Contributions to this project are highly appreciated! Whether you discover bugs, have feature requests, or wish to contribute improvements, your input is valuable. Here's how you can contribute:

• Report Issues: If you encounter any bugs or issues while using MyCalculatorApp, please open an issue on the GitHub repository. Be sure to provide detailed information about the problem and steps to reproduce it.

• Submit Pull Requests: If you have enhancements or fixes to propose, feel free to submit a pull request. Contributions that improve the functionality, usability, or performance of this app are welcomed and encouraged.

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork the Repository.
2. Create a New Branch (git checkout -b feature/your-feature-name).
3. Make Your Changes.
4. Commit Your Changes (git commit -am 'Add some feature').
5. Push to the Branch (git push origin feature/your-feature-name).
6. Create a New Pull Request.

License

This project is licensed under the The 3-Clause BSD License.Feel free to explore, modify, and contribute to this project as you see fit. Your feedback and contributions are greatly appreciated! 🚀✨

Acknowledgments

This project is made possible by the contributions and support of various individuals and communities. Special thanks to:

• Tailwind CSS Team: For developing Tailwind CSS, a versatile CSS framework that simplifies web development and enhances user interfaces.

• Open Source Community: For fostering collaboration, innovation, and the sharing of knowledge, which enriches projects like My Form Validation and makes them accessible to all.

Credits

This project uses the following open-source technologies:

• Next.js: A React framework for server-side rendering and static site generation.

• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.

• Shadcn UI: A component library for building user interfaces.

• next-themes: A theme management library for Next.js applications.

• React: A JavaScript library for building user interfaces.

• Lucide Icons: Icon library used for theme toggle icons (Sun and Moon).

Author

• Nishkarsh Gupta
  • GitHub: nishkarsh25
  • Email: bm21btech11016@gmail.com