omarfarache / task-userprofile

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Folder Structure

├───app                  # contain layout and page where we add pages for our app
├───features
│   ├───OtherFeatures    # add this empty folder just for ui vscode purpose 
│   └───UserProfile      # logic code  
├───public
│   └───images
│       └───avatars      # profile avatars
├───shared
│   ├───components       # components UI that can be shared in may place in our app like button , rest button ...
│   └───utils            # utilitise can be shared in many place like date format
├───styles               # global style
└───ui
    ├───OtherUI          # add this empty folder just for ui vscode purpose 
    └───UserProfile      # pure UI components for the use profile 

Task Requirements

✅ Page Layout
✅ MUI
✅ Design Pattern
✅ Validation
✅ Responsive
✅ Documentation

Other additional features

✅ Local Storage
✅ Toast Alert

Deploy on Vercel

Click to Preview the deployed site