YourCity is a platform to match people to their prefect city.

Overview

YourCity

YourCity is a city matching App that matches users to their ideal city. It is a fullstack React App made with a Redux state manager and a backend using Python, Flask, SQL-Alchemy, and PostgresSQL.

Table of Contents
1. Features
2. Installation
3. Technical Implementation Details
4. Future Features
5. Contact
6. Special Thanks

Technologies

Features

Sign Up and Login Pages

Sign Up Login

Splash Page

Discover and search for new cities Feed Page

Features Splash Features

Profile

Profile card about user and view cities Profile

Feed Tab

YourCity feed displays all cities Feed Page

View, Add, Edit, and Delete Cities

Single city of name, photos, insights City Page

Add a City

follow

Cancel adding city

follow

Edit a city

Edit City

Create, Read, Update, Delete City Insights

View Insights

follow

Add Insights

follow

Edit Insights

follow

Installation

To build/run project locally, please follow these steps:

  1. Clone this repository
git clone https://github.com/{github-handle}/{app-name}.git
  1. Install Pipfile dependencies and create the virtual environment
pipenv install
  1. Install npm dependencies for the /react-app
cd react-app
npm install
  1. In the / root directory, create a .env based on the .env.example with proper settings

  2. Setup your PostgreSQL user, password and database and ensure it matches your .env file

  3. Before running any flask commands, confirm you are in the pipenv virtual env. If not, run the command:

pipenv shell
  1. In the root folder, create the database by running in the terminal:
flask db init
  1. In the root folder, migrate tables to the database by running in the terminal:
flask db migrate
  1. In the root folder, seed the database by running in the terminal:
flask seed all
  1. Start the flask backend in the / root directory
flask run
  1. Start the frontend in the /react-app directory
npm start

Technical Implementation Details

City Validators

This is the first project I used flask and SQLAlchemy, and I didn't have much experience using the wtform validators. After reading documentation, I created Forms to validate required fields with DataRequired and the length of fields with the Length class by providing a min and max.

Code snippet is shown here:

class CityPostForm(FlaskForm):
    name = StringField('name', validators=[DataRequired(), city_exists, Length(min=1, max=80)])
    state = StringField('state', validators=[Length(min=0, max=50)])
    thumbnail_img = StringField('thumbnail_img', validators=[Length(min=0, max=800)])
    description = StringField('description', validators=[Length(min=0, max=1200)])
    user_id = IntegerField('user_id', validators=[DataRequired()])

The form is created from the POST route to create a city, and it is validated using the validators above. If any fields throw an error, then the form.validate_on_submit() will fail and return the errors from form.errors. The resulting errors are passed into a custom error handler that sends back each of the errors to the frontend to display to the user, e.g. 'Field is required' or 'Name field must be between 0 and 100 characters in length'.

@city_routes.route('/', methods=['POST'])
@login_required
def city_post():
        form = CityPostForm()
        form['csrf_token'].data = request.cookies['csrf_token']
        if form.validate_on_submit():
            city = City()
            form.populate_obj(city)
            try:
                db.session.add(city)
                db.session.commit()
                return city.to_dict()
            except:
                return throw_server_error()
        return throw_validation_error(form.errors)

Read More for Long Posts (Insights)

Posts for insights are can span an entire page, which is not ideal for user experience. In order to limit the length, I created a Read More and Show Less buttons to conditionally render the entire post and to hide the post. I was able to use the scrollHeight and offsetHeight of the textarea input to determine if the text was overfilling the container. If the scroll is greater than the offset, then the post is longer and a Read More button should appear.

The frontend uses the isOverflow state to initially determine if the post is overflowing.

const [showMore, setShowMore] = useState(false);
const [isOverflow, setIsOverflow] = useState(true);

  
useEffect(() => {
  const scrollHeight = document.getElementById(`insight__text_id-${insight.id}`)?.scrollHeight;
  const offsetHeight = document.getElementById(`insight__text_id-${insight.id}`)?.offsetHeight;

  if (scrollHeight && offsetHeight) {
    if (scrollHeight > offsetHeight) {
      setShowMore(false);
    } else {
      setShowMore(true);
      setIsOverflow(false);
    }
  }
}, [insight.id]);

The showMore state is used to conditionally render a short post and the entire post. If showMore is false the component will render a cut off post that has a Read more click event to toggle the state. When the Read more is clicked, showMore is set to true and the component now renders the entire post.

In addition the isOverflow is used to render Show less only if the post is overfilling the container.

{!showMore &&
  <>
    <p>
      <span>
        { username }
      </span>
      { insight.insight }
    </p>
    <p className={styles.text_dots}>...</p>
    <span 
      onClick={() => setShowMore(true)}
    >
      Read more
    </span>
  </>
}
{showMore &&
  <>
    <p>
      <span>
        { username }
      </span>  
      { insight.insight }
    </p>
    {isOverflow &&
      <span 
        onClick={() => setShowMore(false)}
      >
        Show less
      </span>
    }
  </>
}

City Reducer

One of my goals on this project was to create a simple reducer with slices of state for each table. Taking code from one of my previous projects, I refactored the code to create four actions. The SET_CITY action case is used for updating the store for the CRUD operations of CREATE, UPDATE, and READ.

The reducer for my City table is shown below:

export default function reducer(state = {}, action) {
  let newState = { ...state };
  switch (action.type) {
    case SET_CITY:
      newState[action.city.id] = action.city;
      return newState;
    case SET_ALL_CITIES:
      action.cities.forEach(city => {
          newState[city.id] = city;
      });
      return newState;
    case DELETE_CITY:
      delete newState[action.cityId];
      return newState;
    case UNLOAD_CITIES:
      newState = {}
      return newState;
    default:
      return state;
  }
}

Future Features

  1. Matches - match people with cities based on their question responses

  2. Search - search cities

  3. Edit Profile - users edit profile info and add banner

Contact

Nico Pierson

[email protected]

Special Thanks

Issues
  • Autofocus Zooms on Mobile devices

    Autofocus Zooms on Mobile devices

    Remove autofocus for forms on mobile devices

    frontend css 
    opened by nicopierson 1
  • Insight redux

    Insight redux

    Finished Insight redux and tested on the frontend.

    opened by nicopierson 1
  • User Validators

    User Validators

    Test/Create validators

    • [x] sign in
    • [x] sign up
    medium backend test api 
    opened by nicopierson 1
  • Create City wtform

    Create City wtform

    Create wtform and add validatots

    medium backend 
    opened by nicopierson 0
  • City redux

    City redux

    Created redux store for city with action thunk creators, and tested them on the frontend. Fixed bugs for delete routes for cities and insights

    Closes #17

    opened by nicopierson 0
  • Insight api routes

    Insight api routes

    Created api routes for insights and added get methods for cities. Added insight forms. Tested on Postman. The routes still need testing on the frontend and for error handlers.

    Closes #19 #24

    backend done api 
    opened by nicopierson 0
  • Dockerfile fix

    Dockerfile fix

    Added ARG to Dockerfile to allow REACT_APP_BASE_URL to be changed for staging environment

    opened by nicopierson 0
  • City Routes and Forms

    City Routes and Forms

    Merge city routes and forms

    opened by nicopierson 0
  • Api routes city

    Api routes city

    Finished City api routes, forms, and tested on postman

    Close #14

    opened by nicopierson 0
  • Insight WTForm

    Insight WTForm

    • [x] Create Insight WTForm
    • [x] Incorporate Validators
    medium backend api 
    opened by nicopierson 0
  • Integrate City Data

    Integrate City Data

    Tasks

    • [ ] integrate csv files for each city
    • [ ] create scale for measuring match percentage
    backend api 
    opened by nicopierson 0
  • Delete User Feature

    Delete User Feature

    null

    backend frontend api 
    opened by nicopierson 0
  • Update Readme with Kanban Board

    Update Readme with Kanban Board

    null

    documentation 
    opened by nicopierson 0
  • Refactor Search API

    Refactor Search API

    • [ ] remove store intermediary
    backend api 
    opened by nicopierson 0
  • Match Design Database Table

    Match Design Database Table

    Design Match table and create connections to other tables

    documentation design backend 
    opened by nicopierson 0
  • Match Api Routes

    Match Api Routes

    Set up api routes for match questions

    api 
    opened by nicopierson 0
  • Match Questions Model

    Match Questions Model

    Add the questions model for logging questions

    backend 
    opened by nicopierson 0
  • Delete User

    Delete User

    Add feature to delete user

    backend frontend redux 
    opened by nicopierson 0
  • Insights x overflow

    Insights x overflow

    For mobile devices insights overflow in the x direction

    frontend css 
    opened by nicopierson 0
  • Match Feature

    Match Feature

    null

    enhancement backend frontend css api 
    opened by nicopierson 0
Owner
Nico G Pierson
Software Engineer passionate about open-source projects. Background in Python and JavaScript/React.js. When I don’t code, I travel and drink coffee.
Nico G Pierson
flake8 plugin which forbids match statements (PEP 634)

flake8-match flake8 plugin which forbids match statements (PEP 634)

Anthony Sottile 22 Nov 23, 2021
Coffeematcher is a python library to randomly match participants for coffee meetings.

coffeematcher coffeematcher is a python library to randomly match participants for coffee meetings. Installation Clone the repository: git clone https

Thomas Wesselink 1 Nov 30, 2021
Simple script to match riders with drivers.

theBestPooler Simple script to match riders with drivers. It's a greedy, unoptimised search, so no guarantees that it works. It just seems to work (ve

Devansh 1 Nov 22, 2021
A platform for developers πŸ‘©β€πŸ’» who wants to share their programs and projects.

Fest-Practice-2021 This project is excluded from Hacktoberfest 2021. Please use this as a testing repo/project. A platform for developers ??‍?? who wa

Mayank Choudhary 45 Nov 8, 2021
NewsBlur is a personal news reader bringing people together to talk about the world.

NewsBlur NewsBlur is a personal news reader bringing people together to talk about the world.

Samuel Clay 5.8k Nov 29, 2021
An AI-powered device to stop people from stealing my packages.

Package Theft Prevention Device An AI-powered device to stop people from stealing my packages. Installation To install on a raspberry pi, clone the re

rydercalmdown 156 Nov 15, 2021
Team Curie is a group of people working together to achieve a common aim

Team Curie is a group of people working together to achieve a common aim. We are enthusiasts!.... We are setting the pace!.... We offer encouragement and motivation....And we believe TeamWork makes the DreamWork.

null 4 Aug 7, 2021
A free website that keeps the people informed about housing and evictions.

Eviction Tracker Currently helping verify detainer warrant data for middle Tennessee - via Middle TN DSA - Red Door Collective Features Presents data

Red Door Collective 4 Nov 21, 2021
An app to help people apply for admissions on schools/hostels

Admission-helper About An app to help people apply for admissions on schools/hostels This app is a rewrite of Admission-helper-beta-v5.8.9 and I impor

Advik 2 Oct 18, 2021
A discord group chat creator just made it because i saw people selling this stuff for like up to 40 bucks

gccreator some discord group chat tools just made it because i saw people selling this stuff for like up to 40 bucks (im currently working on a faster

baum1810 3 Nov 21, 2021
A community-driven python bot that aims to be as simple as possible to serve humans with their everyday tasks

JARVIS on Messenger Just A Rather Very Intelligent System, now on Messenger! Messenger is now used by 1.2 billion people every month. With the launch

Swapnil Agarwal 1.2k Nov 17, 2021
Simple Python-based web application to allow UGM students to fill their QR presence list without having another device in hand.

Praesentia Praesentia is a simple Python-based web application to allow UGM students to fill their QR presence list without having another device in h

loncat 12 Oct 28, 2021
LiteX-Acorn-Baseboard is a baseboard developed around the SQRL's Acorn board (or Nite/LiteFury) expanding their possibilities

LiteX-Acorn-Baseboard is a baseboard developed around the SQRL's Acorn board (or Nite/LiteFury) expanding their possibilities

null 14 Nov 10, 2021
This wishes a mentioned users on their birthdays

BirthdayWisher Requirements: "mysqlserver", "email id and password", "Mysqlconnector" In-Built Modules: "smtplib", "datetime","imghdr" In Mysql: A tab

vellalaharshith 2 Oct 20, 2021
null 2 Nov 9, 2021
Exercise to teach a newcomer to the CLSP grid to set up their environment and run jobs

Exercise to teach a newcomer to the CLSP grid to set up their environment and run jobs

Alexandra 1 Oct 27, 2021
Serverless demo showing users how they can capture (and obfuscate) their Lambda payloads in Datadog APM

Serverless-capture-lambda-payload-demo Serverless demo showing users how they can capture (and obfuscate) their Lambda payloads in Datadog APM This wi

Datadog, Inc. 1 Nov 2, 2021
WriteAIr is a website which allows users to stream their writing.

WriteAIr is a website which allows users to stream their writing. It uses HSV masking to detect a pen which the user writes with. Plus, users can select a wide range of options through hand gestures! The notes created can then be saved as images and uploaded on the server.

Atharva Patil 1 Nov 1, 2021
gwcheck is a tool to check .gnu.warning.* sections in ELF object files and display their content.

gwcheck Description gwcheck is a tool to check .gnu.warning.* sections in ELF object files and display their content. For an introduction to .gnu.warn

Frederic Cambus 6 Nov 6, 2021