/swap-space

A ReactJS community trading app that allows users to trade items based on an item's perceived monetary value - focused on ease of use.

Primary LanguageJavaScript

SwapSpace

SwapSpace is a ReactJS web application for trading items. May 8th-20th, 2020

By: Benjamin Thom

Description

This web application utilizes the MERN stack to provide users with a easy to use tool for finding and trading items by filtering trade items by their monetary value and zip code.

Component Tree

component tree

Wireframe Design

wireframe

Specification User Stories

  • A user should be able to create trade items using a New Item Form with the following details:
    • name
    • description
    • image(s)
    • monetary value
    • zip code
  • A user should be able to view a list of trade items
  • A user shoud be able to click a button to add additonal trade items

Setup/Installation Requirements

Node install

For macOS:

If Homebrew is not installed on your computer already, then install Homebrew by entering the following two commands in Terminal:

Install Git with the following command:

  • $ brew install git

Next, install Node.js by entering the following command in Terminal:

  • $ brew install node
For Windows:

Please visit the Node.js website for installation instructions.

MongoDB install:

For macOS:

Install MongoDb by running the following command:

  • $ brew install mongodb
For Windows and Linux:

Please visit the MongoDB website for installation instructions.

Install this application

Clone this repository via Terminal using the following commands:

  • $ cd desktop
  • $ git clone swap-space
  • $ cd swap-space Then, confirm that you have navigated to the swap-space project directory by entering "pwd" in Terminal.

Install npm at the project's root directory via the following commands:

  • $ npm install
  • $ npm run build

Next open two integrated terminal instances and run the following commands to verify that the MongoDB database and the NodeJS server are running in the backend:

  • Terminal 2:
    • $ mongod
      • MongoDB should now be running and the terminal should display a prompt stating "waiting for connections on port 27017"
  • Terminal 3:
    • $ nodemon server
      • nodemon should now be running and the terminal should display two prompts, #1 "Server is running on Port 4000", and #2 "MongoDB database connection established successfully"

Open the contents of the directory in a text editor or IDE of your choice (e.g., to open the contents of the directory in Visual Studio Code on macOS, enter the command "code ." in Terminal).

Technologies Used

  • Git
  • JavaScript
  • Bootstrap
  • Webpack
  • ReactJS
  • NodeJS
  • Mongoose
  • ExpressJS
  • MongoDB
  • Axios

License

MIT

Copyright (c) 2020 Benjamin Thom