Git Product home page Git Product logo

skill-deals's Introduction


Logo

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

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:

SplashPage

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

Login

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

Signup

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:

DropDown

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

Home

Or view all requests or offers in their own pages:

AllOffers

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

SingleTrade

Create your own offers or requests:

CreateTrade

Rate other users based on user experience:

Reviews

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

Profile

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

UserProfile

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

Messages

Search to find trades or users:

Search

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

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

skill-deals's People

Contributors

nerdkitty1988 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.