Skip to content

A safe place for people to ask any and all questions on their minds, to get answers from other curious and interested people from around the globe.

Notifications You must be signed in to change notification settings

TheGuilbotine/AskPeeps

Repository files navigation

AskPeeps by Pierre Guilbault

A logo of AskPeeps

A safe place for people to ask any and all questions on their minds, to get answers from other curious and interested people from around the globe.

Technologies used

  • Python
  • Flask

Brief Site Walkthrough

All pages have a footer with links to the creators GitHub and Linkedin accounts as well as links to their other projects.

  • Splash page allows users to access login, register, or use a Demo account to check out the app. Along with a biref description of the apps purpose.

Splash Page

  • The Feed Page allows users to view the questions feed, click to see responses to each question and add their own responses. This is essentially a one page app. All of the actual app interaction will happen in the feed page. They can edit or delete any question or response they have asked or answered with.

Feed Page

  • They have their own questions sidebar where they can see the questions they have asked as well as ask their own question. When clicking on a question in their sidebar they will be scrolled to their question in the feed.

Questions Sidebar

  • The Responses drop down populates just under each question dynamically.

Responses Drop Down

  • Much of the app conditionally renders.

Installation

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

  1. Clone this repository
git clone https://github.com/TheGuilbotine/AskPeeps.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, 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

Challenges

  • Some rerenders were diffiuct to implement smoothly, but eventually were mastered with creating a new slice of state for specifically the users information and related resources because of the nested nature of responses in questions coming from the backend.
  • Finding a way to allow only one drop down to open when clicking on a Responses drop down div button. I was breaking my code into many components and did not bring the function to open and close the div into the right component.
  • Edit and Delete was being difficult for a while beacuse of idx being used for keys instead of the id of the object mapped from the questions and responses arrays.

Future Features

  • Search Questions
  • Flag inappropriate or inaccurate content
  • Yes vote or No vote content
  • Tag questions
  • Chat
  • Special Thanks to some great coders

    About

    A safe place for people to ask any and all questions on their minds, to get answers from other curious and interested people from around the globe.

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published