Mark-It

Your local farmers market

Mark-It...farm to app to table...bringing artisans and customers together!

Mark It is a full stack application built with React that allows user to create, edit and delete a posting of a product.

Table of contents

• General info
• Screenshots
• Installation
• Usage
• Credits
• Features
• Status
• License
• Contributers

General Info

This application gives user the ability to find farmers market events when searching by zip code, to post products for sell, to favorite vendors and markets. Your posted item will be pinned to the map and will be shown to the users that have marked you.

Screenshots

mobile screen size responsive

---

Once landing at the splash page , a video showing with introduction about the page

On Find Market tab, if you are not logged in , you can find farmers market events searched by zip code, If you log in , you can post an item and it will be pinned to the map.

The user profile layout with shortcuts to the map, add product and all items for sale.

The view all products page

Installation

To install:

• Visual Code
• NodeJS
• MySql
• MySqlworkbench

In order to install, first download the files. Then you would open terminal and type npm install . This will install all the npm packages listed under the dependencies in the package.json. Then you will type the command npm start. This will start the react app at the port 3000 in the browser. Finally you will type localhost:3000 in the browser window and use the application.

Usage

To use this application, you can click here.

Upon clicking on the link above, you can create a user and password in the app and from there you can be directed to posting items for sell or searching markets by zipcode.

Credits

Built with Bulma

Fonts from Google Fonts

Icons from flat icon

Logo from Tailorbrands

deploy with heroku

animation animista

video edits imovie

npm packages used:

• axios
• bulma
• mapbox-gl
• bcrypt
• dotenv
• express
• sequelize
• uniqid
• Node MySQL 2
• MySQL
• connect-session-sequelize
• express-session
• foundation-sites
• mysql2
• session
• react-moment
• moment
• react-calendar
• bulma-toast

Other Technologies used:

• For photo upload cloudinary
• For data manipulation/array methods Lodash

Features

List of features:

• Feature 1: Easy to navigate design.
• Feature 2: Ability to create, update, delete product postings.
• Feature 3: Map to show where on the map an item is selling.
• Feature 4: Ability to create a user and password.
• Feature 5: Ability to post an item for sale which will be pinned to map.
• Feature 6: Showing market events on calendar.
• Feature 7: Toast alerts on the page.
• Feature 8: form validation.

To-do list:

• a. Ability to send email to the users that follow a vender.
• b. pop up functionality, real time notification for vendors
• c. Chat functionality within the app
• d. To send a payment verification message to the buyer
• e. Having a budget graph
• f. allowing user to rate a vender or write a review
• g. add to cart
• h. ability to add review on items from a vendor
• i. to make payments within the application
• j. scheduled delete functionality for old posts

Status

Project is: in progress

Inspiration

The Covid 19 pandemic has caused the majority of the population to practice social distancing. This application can help local producers to sell their products to local people.

License

MIT license Copyright © 2020 Zahra Ali Aghazadeh, Diana Stebbins, John Huntsperger, Zac Stowell

Contributors

Feel free to contact us via linkedIn for any feedbacks, questions or collaborations!

Diana Stebbins : Back End Developer/ Git Master Github , LinkedIn

John Huntsperger : Front End Developer/ Designer Github , linkedIn

Zac Stowell: Back End Developer Github , LinkedIn

Yalda Ali Aghazadeh : Project Manager / Front End Developer/ Designer Github , LinkedIn