arthurlbo / delta-login

💻 Challenge of an interface design for authentication, end to end, from the ui to the code.

Hi there! 👋

A front end challenge of an interface for authentication, from prototype to code.

The objective of this challenge was to improve my UX and UI skills, applying design principles to create a login form and also the improvement of tools for frontend development such as next, typescript, tailwind, tests with cypress, react-hook-form, among others .

Inside the code, I focused on following the good practices of React, breaking down the application into reusable components, leaving the form and inputs ready to be sent to an API and being able to be reused in different ways, validating form information with zod, testing components with cypress, and documenting components with storybook.

Prototype in Figma

What is inside?

• NextJS
• ReactJS
• TypeScript
• Tailwind
• Radix-ui
• phospor icons
• React-hook-form
• Zod
• Storybook
• Cypress
• Eslint
• Prettier
• Husky
• Commitlint

Getting Started

Install dependencies:

pnpm install

or

yarn

or

npm install

Run development server

pnpm dev

or

yarn dev

or

npm run dev

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

Structure

└── src
    ├── app
    ├── assets
    ├── components
    ├── utils

Folder	Description
app	Pages
assets	Images and static files for application
components	Pages components
utils	Auxiliary and reusable functions

Conventions

Components

└── <MyComponent>
    ├── <MyComponent>.tsx
    ├── <MyComponent>.spec.tsx
    ├── <MyComponent>.stories.tsx
    └── index.ts

Files	Description
.tsx	Component implementation
.spec.tsx	Component tests
.stories.tsx	Storybook component
index.ts	File to export the component

Commands

• dev: run development server
• build: creates the production build version
• lint: runs the linter in all components and pages
• storybook: runs docs with storybook
• cypress: open cypress
• test: run test file
• commit: commit staged changes

Todo

• User registration
• Forgot password
• Improve component tests
• Integration with NextAuth

Made with 🤍 by Arthur