Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gyandeeparyan/email-client


https://github.com/gyandeeparyan/email-client

email-client front-end-development hiringchallenge localstorage nextjs14 react reactjs redux-toolkit

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README

        

# Q1 | Email Client

The app features an email list page. This page shows the list of emails sent to a user.
Clicking on any email item in the list should split the screen into a master-slave (left-right) screen type where the master (left) shows the email list (with the selected email item) while the slave (right) shows the body of the email. The body of the email is not known ahead of time and should be loaded only when the email item is clicked

## Screenshots

![Landing Page](https://res.cloudinary.com/dzbmc0pit/image/upload/v1729247807/email-client_ailcwl.png)

## Features

- The app features an email list page. This page shows the list of emails sent to a user.
- Clicking on any email item in the list should split the screen into a master-slave (left-right) screen type where the master (left) shows the email list (with the selected email item) while the slave (right) shows the body of the email.
- The body of the email is not known ahead of time and should be loaded only when the email item is clicked.
- The app should allow any particular email item to be marked as “favorite”, it should be done via clicking on an email item and then clicking the “Mark as Favorite” button in the email body section.
- The app should show read and unread mails in different CSS styles to distinguish between the same.
- Allow filtering emails by “favorites”, “read” and “unread”

## Tech Stack

**Client:** Next.js, Redux Toolkit, TailwindCSS

## Run Locally

Clone the project

```bash
git clone https://github.com/gyandeeparyan/email-client
```

Go to the project directory

```bash
cd email-client
```

Install dependencies

```bash
npm install
```

Start the server

```bash
npm run dev
```

## Demo

- https://email-client-mu.vercel.app/

## Feedback

- [Send anonymous feedback](https://sameeksha.vercel.app/u/gyan?utm_feedback_type=git-roc8-email)