jen-icl / grocery_list

Grocery List built with React.js and Node.js https://grocerylist.jen-icl.com

Grocery List

Click to Visit Live Site
A content management system(CMS) designed for grocery shoppers to keep a list of his/her groceries through CRUD operations

App Features

• Read grocery list
• Add grocery item
• Update grocery item
• Delete grocery item
• Both desktop and mobile responsive

Accomplishments

• Created a full scale application with front-end and back-end integration
• Technologies used:
  • React.js
  • Node.js
  • MySQL
  • Sass
  • MaterializeCSS

Future Features

• Include sorting features to sort list
• Improve user experience

Project Planning and Progression Management

• Click on the links below to view the project planning and progression tracking tools
  • Task management
  • Wireframe planning

System Requirements

• MySQL
• Node.js
• Windows: XXAMP, Mac: MAMP

Setup Instructions

This repo is built with React.js and Node.js. Follow the below setup instructions to get started.

1. Fork this repo
2. Clone your forked copy of this repo
   • git clone https://github.com/[your_username]/grocery_list.git
3. Change directory into the newly cloned repo
   • navigate to the application folder cd grocery_list
4. Install dependencies
   • npm install
   • navigate to the api folder cd public/api
     • npm install
5. Create credential files a. Database credentials - navigate to the api folder cd public/api - make a copy of the mysqlcreds.js.config file and rename new file to mysqlcreds.js - add your database credentials
6. Start dev server
   • npm start
   • navigate to the api folder cd public/api
     • npm start
7. Use MAMP, XAMPP, or a similar program to start your local Apache and MySQL servers
   • Point root directory to the public folder of this project
   • import the sql database into phpMyAdmin, or similar found in the public/api/data folder
8. Open a browser and navigate to localhost:3000

Author

• Jennifer Lai (https://github.com/jen-icl)