PROJECT: NEXT ✨

Let this be your NextJS Playground!

Welcome to the Project: Next! This repository contains the code for a project developed using Next.js, Tailwind, TypeScript, Plop, Jest, Storybook, and with an Atomic approach.

Technology Used and Approach 💻

The project utilizes the following technologies and approach:

1. Next.js - A powerful framework for building modern web applications.
2. Tailwind - A utility-first CSS framework for rapid UI development and customization.
3. TypeScript - A statically-typed superset of JavaScript that enhances development safety, productivity, and maintainability.
4. Plop - A code generator that automates repetitive tasks and maintains code consistency.
5. Jest - A testing framework for writing comprehensive unit tests to ensure code quality.
6. Storybook - A tool for building and documenting components in isolation, streamlining the design and development workflow.
7. Atomic Approach - A design methodology that organizes components into atoms, molecules, and organisms for better reusability and maintainability.

Local Setup 🚀

To run this project locally, please follow these steps:

1. Clone the repository: git clone https://github.com/paoloLigsay/projectnext.git
2. Install dependencies: yarn install
3. Start the development server: yarn dev
4. Open your preferred browser and navigate to http://localhost:3000 to see the project in action.

Additionally, you can also view the components via Storybook:

1. Run Storybook: yarn storybook
2. View the components on Storybook by navigating to http://localhost:6006 (Please note that this could change).

Please Note that:

1. Not all components where modified to be viewed on storybook.
   • Kindly add values inside the args object on stories.tsx for the component to render.
   • View interface.tsx to check the required and available properties.

Component Generation 🧩

To generate new components, follow these steps:

1. Run the command: yarn generate
2. Choose one of the following options: Atoms, Molecules, Organisms
3. Once selected, a sample folder structure will be generated for the chosen component type. For example, if you choose an Organism, the following folder structure will be created:

└── components
      └── organisms
        └── componentName
          ├── index.ts
          ├── componentName.stories.tsx
          ├── componentName.test.tsx
          ├── componentName.tsx
          ├── componentName.styles.tsx
          └── componentName.interface.tsx

This structure provides a standardized setup for the new component, including necessary files for implementation, testing, styling, and interface definition.

License 📄

This project is licensed under the MIT License. Please see the LICENSE.md file for more details.

Contact 📧

If you have any questions or suggestions regarding this project, please feel free to reach out to me at Paolo Ligsay. I would be happy to assist you!

Thank you for your interest in this project. Happy coding! 🎉