search

marimetsola / shopping-list

Shopping list web app.
0 stars 0 forks source link

readme

Logo

Kauppalappu

Responsive, easy to use shopping list web application
Open app »

## Table of Contents * [About the Project](#about-the-project) * [List Of Features](#list-of-features) * [Built With](#built-with) * [Usage](#usage) * [Registration](#registration) * [Create A List](#create-a-list) * [Add Item](#add-item) * [Check Item](#check-item) * [Drag Item](#drag-item) * [Invite User](#invite-user) * [Unintive User](#invite-user) * [Account Settings](#account-settings) * [Roadmap](#roadmap) * [Contact](#contact) * [Acknowledgements](#acknowledgements) ## About The Project

Screenshot

A simple and easy to use shopping list web application made with the MERN stack. Create a list and manage the items using your desired device before breezing through your favourite grocery store with your trusted web app open on your phone. Hosted on EC2. Click here to open the application. Record of working hours: Markdown file, OpenOffice file ### List Of Features * Create lists * Add items to list * Edit or delete items * Drag and drop the items to change their order on the list * Click on items to check them on and off * Invite and uninvite other users to and from your lists * Request a password reset email and follow the link to reset your password * Change username, email and password in account settings * Accept or decline list invitations in the account settings ### Built With * [React](https://reactjs.org) * [Node](https://nodejs.org) * [Express](https://expressjs.com) * [MongoDB](https://www.mongodb.com) ## Usage Listed below are the steps to use the main features of the application. ### Registration Click the register button to open a modal for registration.

Registration



Fill in a username and a password and optionally an email address so you can reset your password in case you should forget it. Email can also be added later in the account settings.

Registration

### Create A List Click the add list button to open up a modal to create a list.

Add list

### Add Item Click the add item button or press enter to open up a modal to add an item.

Add item

### Check Item Click an item to check it on and off.

Click item

### Drag Item Drag and drop an item to move it to a different place on the list.

Drag item

### Invite User Click the edit button to open a modal for the list's information and settings.

Click edit



Fill in a user's name and invite them to the list.

Invite user

### Uninvite User Click the X button to remove an invitation from a user.

Uninvite user

### Account Settings Click the account button on the navigation bar to access your settings. A red badge with a number will indicate the number of invitations you have to lists.

Open profile



You can change your username, email and password in the account settings in addition to accepting or declining any invitations to lists you might have.

Profile page

## Roadmap See about using WebSocket API to listen to changes made to lists by other users. ## Contact cocosweetsmail@gmail.com ## Acknowledgements * [Full Stack open 2020](https://fullstackopen.com/) * [Best-README-Template](https://github.com/othneildrew/Best-README-Template) * [TypeScript](https://www.typescriptlang.org/) * [Formik](https://formik.org) * [Semantic UI React](https://react.semantic-ui.com/) * [Axios](https://github.com/axios/axios) * [React-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) * [Nodemailer](https://nodemailer.com)