Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jatinassudaney/atlys-assignment
Mini frontend app with an auth flow as submission of frontend assignment for Atlys
https://github.com/jatinassudaney/atlys-assignment
css-flexbox eslint mobile-responsive nextjs14 prettier reactjs responsive tailwind-css typescipt typescript-react zod-validation
Last synced: 3 days ago
JSON representation
Mini frontend app with an auth flow as submission of frontend assignment for Atlys
- Host: GitHub
- URL: https://github.com/jatinassudaney/atlys-assignment
- Owner: JatinAssudaney
- Created: 2024-08-24T04:50:50.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-08-26T06:08:35.000Z (2 months ago)
- Last Synced: 2024-10-11T12:02:34.817Z (27 days ago)
- Topics: css-flexbox, eslint, mobile-responsive, nextjs14, prettier, reactjs, responsive, tailwind-css, typescipt, typescript-react, zod-validation
- Language: TypeScript
- Homepage: https://atlys-visa-assignment.vercel.app/
- Size: 26.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Atyls Assignment (Mobile Responsive)
## Tech Stack
![Next.js](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)
![React](https://img.shields.io/badge/-React-61DBFB?style=for-the-badge&labelColor=black&logo=react&logoColor=61DBFB)
![Typescript](https://img.shields.io/badge/Typescript-007acc?style=for-the-badge&labelColor=black&logo=typescript&logoColor=007acc)
![Javascript](https://img.shields.io/badge/Javascript-F0DB4F?style=for-the-badge&labelColor=black&logo=javascript&logoColor=F0DB4F)
![Tailwind](https://img.shields.io/badge/Tailwind_CSS-092749?style=for-the-badge&logo=tailwindcss&logoColor=06B6D4&labelColor=000000)
![Zod](https://img.shields.io/badge/Zod-000000?style=for-the-badge&logo=zod&logoColor=3068B7)
![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)
![VSCode](https://img.shields.io/badge/Visual_Studio-0078d7?style=for-the-badge&logo=visual%20studio&logoColor=white)## Demo
> [!NOTE]
> The Demo gif is compressed, so it doesn't display the actual UI properly. Check [Live Preview](https://atlys-visa-assignment.vercel.app/)![web-demo](/assets/assignment-demo.gif)
## Usage
1. `/signin` - Signin pageShows signin form
2. `/signup` - Signup page
Shows signup form
3. `/posts` - Posts page
Shows all the posts. You can create post as well. When you try to create a post, Signup Modal opens and shows option if you want to login instead of signing up.## Structure
1. `public`: Contains all the public assets for the app
1. `icons`: Contains all the icons that are used in the app.
2. `images`: Contains sample avatar images for posts
2. `src`: Contains all the source code
1. `actions`: Contains all the server actions for server component
2. `app`: Contains the routes of the App as AppRouter is used with Next14.
3. `components`: Contains the components used in the App.
1. `common`: Contains common components used across the App. Ex: Input, Button, etc.
2. `...others`: Rest folders are used as Custom Reusable Components which can be used across the App.
4. `models`: Contains the models used in the App i.e constants, interfaces.
5. `utils`: Contains util function that are used within the App.
6. `paths.ts`: Contains all the paths that are defined for our App.## Validation
> [!NOTE]
> Validation are added in signin and signup forms using [zod](https://zod.dev/)### Existing Validations
1. Signin Form
1. Email/Username must be at least 3 characters long
2. Password must be at least 8 characters long
2. Signup Form
1. Email validation using zod
2. Username must be at least 3 characters long
3. Username must be no more than 20 characters long
4. Username can only contain letters, numbers, underscores, and periods
5. Password must be at least 8 characters long> [!NOTE]
> Some password validations have been commented for ease of use for demo
## Commented Validations
1. Password must contain at least one uppercase letter
2. Password must contain at least one lowercase letter
3. Password must contain at least one number
4. Password must contain at least one special character