Project Overview

This is the NYC General Assembly Software Engineering Immersive, Panda Cohort's "Project 3," created by Francine Altman, Alex Curtin, Erinn Nelson and Ana Silvia, collectively known as "Team Taco".

Project Description

Project Name

tackle;

Project Outline

The purpose of this app is to allow users to ask and answer questions related to coding. Users may post questions and responses by topic once they have created an account. Additionally, questions can be marked as 'solved' by the original poster to help guide other users.

Set Up

Fork and clone this repo
cd into the app directory
run npm i
run npm start to initialize the backend server
cd into the client directory
run npm start and allow the client server to run on an available port

Site link not yet available

Created with React, Express, and PostgreSQL

MVP

Users can browse questions by topic
Users can register an account and log in
Registered users can post/delete/edit questions
Registered users can post/delete/edit responses to questions

PostMVP

Users can log out
Questions can be marked 'solved' by the original poster
Registered users may 'like' answers
Answers marked 'solved' are sorted to the top of responses
Answers are sorted by amount of 'likes'
Registered users can start comment threads on answers
Posted questions can be viewed by 'all,' 'solved only,' or 'unsolved only'
Users may search for questions using title or body keywords
Registered users can visit a profile page displaying their activity on the site
Registered users can add a username, edit and delete their account
Users can log in using authentication from 3rd party services like facebook

App Features

Users can register an account on the site
Users and topics are stored on a backend server/database
Seemless UI

ERD

API Endpoint Documentation

GET
/users/verify	Primarily used to check if a user is already logged in when the page loads. Takes user’s token from local storage (if there is one) and uses it to verify who they are. Returns user’s data (name, email, id).
/questions/topic/:topic	For fetching all questions pertaining to a specific topic. ‘Topic’ is the only parameter in the request. Returns an array of questions, each with: id, topic, title, question, user id.
/questions/id/:id	For fetching one question and all of its associated answers. The request will include the question id. Returns a single question (id, topic, title, question, user id) with an array of answers (id, answer, question id, user id).

POST
/users	For adding a new user. Takes users name, email and password, encrypts the password and stores the info in the database. Returns user’s data (name, email, id) minus password, and an auth token.
/users/login	For logging in users. Will take their name and password, verify them and create a token to be stored in local storage. Returns user’s data (name, email, id) minus password, and an auth token.
/questions	For posting a new question to the database. Requests will include the user’s token, topic, title, question and user id. Returns question data (id, topic, title, question and user id).
/question/id/:id/answers	For posting a new answer to a specific question in the database. Takes the user’s token, question id, user id, and answer. Returns answer data (id, answer, question id, user id).

PUT
/questions/:id	For updating a question. The request will include the user’s token, question id, topic, title, and question. Returns question data (question id, topic, title, question).
/answers/:id	For updating a question. The request will include the user’s token, answer id, and answer. Returns answer data (answer id, answer, user id, question id).

DELETE
/questions/:id	For deleting a question. The request will include the user’s token and question id. Returns message “Question deleted.”
/answers/:id	For deleting an answer. The request will include the user’s token and answer id. Returns message “Answer deleted.”

Wireframes

Desktop

Mobile

React Component Hierarchy

<App />
- <header>
  - <nav>
    - <RouterLink to='/'>
    - <SearchBar />
    - <HashLink to='/topic-selectors>
    - <modal name='Login-Register'>
      - <UserAccounts />
        
        <UserLogin /> - conditionally render
        
        <input type='text' name='username'/>
        
        <input type='text' name='password'/>
        
        <button onClick='login user'>
        
        <button onClick='show UserRegister'>
        
        <UserRegister /> - conditionally render
        
        <input type='text' name='name'/>
        
        <input type='text' name='username'/>
        
        <input type='text' name='email'/>
        
        <input type='text' name='password'/>
        
        <button onClick='register user'>
        
        <button onClick='show UserLogin'>
- <main>
  - <Hero Page /> - conditionally render
    - <img name='hero-image'>
    - <SearchBar />
    - <TopicSelector /> - multiple listed
      - 'title'
      - <RouterLink to='TopicPage'>
    - <button onClick='create new question'>
  - <TopicOrSearchPage /> - conditionally render
    - 'topic/search-query'
    - <button onClick='create new question'>
    - <PostNewQuestion /> - conditionally render
      - <input type='select' name='topic'>
      - <PostEditForm />
        
        <input type='text' name='title'>
        
        <input type='text' name='new-answer'>
    - <QuestionsList />
      - <button onClick='shows unsolved only'>
      - <button onClick='shows solved only'>
      - <QuestionSelector /> - multiple listed
        
        'question title'
        
        'poster username, time posted'
        
        'topic'
        
        <RouterLink to='QuestionPage'>
  - <QuestionPage /> - conditionally render
    - <Question />
      - <UserPost /> - conditionally render
        
        'poster username, time posted'
        
        'Answer text and code'
        
        <button onClick='edit'> - Available to post creator
        
        <button onClick='delete'> - Available to post creator
      - <PostEditForm /> - conditionally render
        
        <input type='text' name='title'>
        
        <input type='text' name='new-answer'>
        
        <input type='code' name='code'>
    - <button onClick='create new answer'>
    - <PostNewAnswer /> - conditionally render
      - <PostEditForm />
        
        <input type='text' name='title'>
        
        <input type='text' name='new-answer'>
        
        <button onClick='submit'>
    - <Answer /> - multiple listed
      - <UserPost /> - conditionally render
        
        'poster username, time posted'
        
        'Answer text and code'
        
        <button onClick='edit'> - Available to post creator
        
        <button onClick='delete'> - Available to post creator
      - <PostEditForm /> - conditionally render
        
        <input type='text' name='title'>
        
        <input type='text' name='new-answer'>
      - <button onClick='marks AnswerPost as correct'> - Available to QuestionPost creator
- <footer>
  - 'year'
  - <a href='github'>

Additional Libraries

Issues and Resolutions

Potential Problem	Proposed Solution:
Searching	Use PostGreSQL select parameter 'LIKE'
Users forgetting passwords	Create temporary token that allows user to create new password

erinnnelson / codeseek