Skill Deals

Skill deals is an app to connect people who would like to barter services. Users can either post an offer of a service they would trade, or they can post a request for a service they are in need of. If the user finds an offer or request they are interested in, there is a messaging feature enabled to connect the users in a private chat room for conversations.
Skill Deals Wiki »

Live Site Here

Overall Structure

Back End

The app was built using Flask, SQLAlchemy, and Python on the back end with a PostgreSQL database. The backend structure is RESTful API. Model associations are used to minimize database queries to the backend, assuring speed and reliability.

Front End

The front end is built with React and Javascript while utilizing Redux architecture, producing a lightning-fast user interface and calling upon dynamically rendered components.

Built With

• React
• JavaScript
• Python
• Redux
• Flask
• SQLAlchemy
• PostgreSQL
• CSS

Getting Started

To get a local copy up and running follow these simple steps.

Installation

1. Clone this repository (only this branch)

   git clone https://github.com/nerdkitty1988/skill-deals.git

2. Install dependencies

   pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt

3. Create a .env file based on the example with proper settings for your development environment

4. Setup your PostgreSQL user, password and database and make sure it matches your .env file

5. Get into your pipenv, migrate your database, seed your database, and run your flask app

   pipenv shell

   flask db upgrade

   flask seed all

   flask run

6. To run the React App in development, checkout the README inside the react-app directory.

Usage

Only registered users can use the site. Splash page before sign in or sign up:

An easy-to-use login with a pre-configured Demo User:

Users can create their own account with an easy sign up:

Once logged in, you can see a navigation bar to help guide you around the site. On the navigation bar, there is a dropdown menu to view user profile, messages, or to log out:

Home lets the user View requests and offers close to them:

Or view all requests or offers in their own pages:

Go into the individual trade to view more details, and a clickable link to the author's profile:

Create your own offers or requests:

Rate other users based on user experience:

View your own profile to edit or delete user trades, or to edit your profile:

Or view other users profiles to rate users, or see their other offers and requests:

Chat with other users to work out fine details of your trade

Search to find trades or users:

Challenges

• This app features the Haversine formula for calculating distance. While I can't take credit for the amazing formula, implementing it without drastically slowing my site was a hurdle.

• This app also features a messaging feature. This feature did not need to be robust, and also needed to be custom fit for the app. I built my own messaging page with private chat rooms without the use of websockets (yet). This was a challenge, but I do plan on expanding this feature.

• This app is a mixture of dynamic elements and rendered ones. A large challenge was finding the right combination of useEffect functions and their dependency arrays.

• This app also features multiple modals. Implementing those so that the data was passed between them was a bit of a blocker. I was able to also implement these with a mixture of dynamic and rendered elements.

Contact

• Jami Travers- LinkedIn - GitHub

Project Link: https://skill-deals.herokuapp.com/