Giter VIP home page Giter VIP logo

09-suncoast_overflow's Introduction

09 Suncoast Overflow

Visit the live site: https://kento-suncoast-overflow.herokuapp.com/

My first full-stack app that emulates the Stack Overflow website.

  • Some features
    • Logging in and out
    • Asking a question
    • Showing a list of questions sorted by the amount of votes
    • Searching a question
    • Answering a question
    • Voting a question
    • Voting an answer

Technologies used:

  • C#/.NET backend
  • PostgreSQL database
  • Entity Framework to build migrations
  • HTML/CSS/Javascript Frontend
  • React.js
  • React Router
  • React Hooks
  • Heroku deployment

This is my first attempt at building an app that utilizes both frontend and backend development in one app. This project allowed me to familiarize myself with working on both sides of the app simultaneously using various technologies to make it work. Try it out!

Assignment Overview:

A good way to practice the concepts of creating full-stack web applications is to duplicate an existing site. For this project, you will be creating a copy of a site that you know very well, StackOverflow.

Objectives

  • Create a full-stack web app, from the database to the API, to the styled and responsive frontend.

Requirements

Create an anonymous question and answer site that allows users to up-vote and down-vote questions and answers.

Here are the user stories for this application:

  • As a user I should be able to view and search previously asked questions.
  • As a user I should be able to view a specific question and all of its answers.
  • As a user I should be able to anonymously post a question.
  • As a user I should be able to answer an existing question.
  • As a user I should be able to upvote or downvote a question.
  • As a user I should be able to upvote or downvote an answer.

Day 1

Explorer Mode

You have a choice to create a custom design or to start with existing HTML and CSS we provide.

  • If you are going to create a custom design:
    • Create wireframes for your app.
  • Create an ERD for the core functionality.
  • Generate your dotnet new project.
  • If you are going to create a custom design:
  • Create the static HTML and CSS for all the pages the app will need.
  • If you are going to use our starter files:
  • Update the design or layout to fit your needs. Practice some HTML and CSS.
  • Create React components for each page
  • Setup React Router to render these, but still just static representations

Day 2

  • Generate your database migrations based on your ERD.
  • Insert sample questions, and corresponding answers into your database.
  • Create the API for generating the list of questions to show on the home page.
  • Create the API for posting a new question.

Day 3

  • Create the API for fetching a single question along with its answers.
  • Create the API for posting a new question.

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.