Login and Register Pages with Atomic Design

This project implements login and register pages using Next.js, Tailwind CSS, and the Atomic Design methodology.

Tech Stack

• Next.js: A React framework for building server-side rendered and statically generated web applications.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
• React: A JavaScript library for building user interfaces.

Atomic Design Implementation

This project follows the Atomic Design methodology, which consists of five distinct levels:

1. Atoms: Basic building blocks of matter, such as input fields, buttons, and labels.
2. Molecules: Groups of atoms bonded together, like a form label, input, and error message.
3. Organisms: Groups of molecules joined together to form a relatively complex, distinct section of an interface.
4. Templates: Page-level objects that place components into a layout and articulate the design's underlying content structure.
5. Pages: Specific instances of templates that show what a UI looks like with real representative content in place.

Folder Structure

.
├── app
│   ├── login
│   │   └── page.js
│   └── register
│       └── page.js
└── components
    ├── atoms
    │   ├── Button.js
    │   └── Input.js
    ├── molecules
    │   └── PasswordInput.js
    ├── organisms
    │   ├── LoginForm.js
    │   └── RegisterForm.js
    └── templates
        ├── LoginTemplate.js
        └── RegisterTemplate.js

Components Breakdown

Atoms

• Input.js: A reusable input component.
• Button.js: A reusable button component.

Molecules

• PasswordInput.js: A password input with show/hide functionality.

Organisms

• LoginForm.js: A form component for the login page.
• RegisterForm.js: A form component for the register page.

Templates

• LoginTemplate.js: A template for the login page layout.
• RegisterTemplate.js: A template for the register page layout.

Pages

• app/login/page.js: The login page.
• app/register/page.js: The register page.

Getting Started

1. Clone the repository
2. Install dependencies with npm install
3. Run the development server with npm run dev
4. Open http://localhost:3000 in your browser

Author

Ijlal Windhi

License

This project is open source and available under the MIT License.