tfb-kjmp-frontend

Project overview

An app created to inspire Black queer travellers to see the world safely and connect with people everywhere. Allows users to input user data from a postgres database using an RESTful API built in Express, and also features data input by our Product Owner via an Airtable database.

The team

• Ephie - Design / Developer 💅
• Josh - Quality assurance / Developer 👾
• Terrence - DevOps / Developer 🧳
• Trish - Scrum facilitator / Developer 🦺

Contents

• Tech Stack
• 🗄️ Database schema
• 🧞‍Features
• 🔧 Install
  • Database setup
  • REST API Endpoints
• 🕐Project Timeline
  • 🎨 Week 1 - Design
  • 🔧 Week 2 - First Build Sprint

    🧞‍Features

    • Users can see approved posts of other people's experiences, things to do, businesses and laws in each country
    • Users can post their own experiences, things to do and business listings for each country
    • An admin can view unapproved posts and approve them for viewing by users

    🔧 Install

    1. Clone this repo locally
    2. Run npm run i to install dependencies

    Database setup

    3. Enter postgres by typing psql into your terminal and set up a superuser for the local database by running the following:

    CREATE USER myuser WITH PASSWORD 'mypassword';

    4. Set up local dev/testing database

       CREATE DATABASE my_new_db WITH OWNER myuser;
       \connect database_name;
       \include .../database/init.sql;
    

    5. Add the local database info to a .env in the root of the project

    TEST_DATABASE_URL = "postgres://myuser:mypassword@localhost:5432/database_name"
    

    ---

    REST API Endpoints

    • :table retrieves entries from the Experiences, Thing to Do or Businesses tables in the database
    • :id retrieves a country from the world (1-197)

    PUBLIC GET ROUTES

    • GET all countries: http://localhost:3000/countries
    • GET a specific type of listing about a specific country :http://localhost:3000/countries/:id/:table

    PUBLIC POST ROUTES

    • POST an experience of visiting a country : http://localhost:3000/countries/:id/experiences
    • POST a thing to do listing to a country : http://localhost:3000/countries/:id/things_to_do
    • POST a business listing to a country : http://localhost:3000/countries/:id/businesses

    ADMIN ROUTES

    • GET all unapproved posts to review for approval : http://localhost:3000/admin/:table/:postId
    • PUT approval on a post : http://localhost:3000/admin/:table/:postId
    • DELETE a post : admin/:table/:postId

    ---

    🕐 Project Timeline

    🎨 Week 1 Design

    Here's an overview of our user stories -

    • As a Black queer person who likes travelling, I want to access useful and specific travel information so that I can travel safely
    • As a local or an experienced traveller, I want to enter text so that I can recommend places to other Black queer people
    • As a mobile user, I want to quickly and easily navigate the webpage so that I can access info without having to use a laptop
    • As a user with poor internet access, I want to access a page without worrying about how much data is being used so that I can see all necessary information
    • As a Black queer person who owns a business, I want to contact the admin so that I can promote my business
    • As a queer person soon to be married, I want to find country specific same-sex marriage laws so that I can plan my wedding abroad
    • As a user visiting a poorly rated country, I want to immediately see relevant warnings so that I can plan my trip accordingly
    • As a queer user, I need a way to quickly navigate away from the site so that I can keep myself safe
    • As a disabled user I want to filter out inaccessible destinations so that I can plan my trip with my mobility in mind

    The initial prototype can be viewed here on Figma

    From our initial user research, we learnt that we needed to make our navigation clearer, and that people wanted to be able to add businesses as well as their own things to do in a country, alongside the original experiences posts. Also, we needed to make it more colourful!

    🔧 Week 2 First Build Sprint

    Monday

    • Set up database models, handlers and routes
    • Mobbed on database design
    • Started on Airtable
    • Testing

    Tuesday

    • Continued with our endpoints
    • Continued with models
    • Continued with handlers, routes
    • More tests!

    Wednesday

    • Finished off endpoints
    • CircleCI & Codecov
    • Finished Airtable

    Thursday

    • Had a code review and implemented some fixes
    • Had a Project Owner review and implemented some changes
    • Finished off Codecov

    Velocity for this week can be viewed on Notion

    🔨 Week 3: Second Build Sprint

    Monday

    • Creating a list of continents and adding this to data structure, then rendering on front-end
    • Rendering laws page
    • Creating styled components
    • Fetch and display experience data

    Tuesday

    • Rendering 'submit experience' form
    • Work on admin area
    • Create a quick exit button

    Wednesday

    • User testing
    • Code review with our Project and DevOps mentors
    • Consolidating and prioritising feedback

    Thursday

    • Finish adding 'things to do' form
    • Finish admin pages for approving and deleting posts
    • Create 'about' page
    • Created filtering for tags
    • Styling fixes

    ⏳ Additional Features

    • Ability to see listings of businesses in each country
    • Ability for Black/queer users to add their own business listings
    • Filter by tags
    • Search for countries
    • Add photos to listings