Skip to content

A full-stack web application for user to post, vote, and comment on fun facts.

Notifications You must be signed in to change notification settings

zhangshi0512/FactsHub

Repository files navigation

Web Development Final Project - Facts-Hub

Submitted by: Shi Zhang

This web app: allows users to share different types of facts, vote and comment on existing facts. The user can also edit or delete existing facts by entering the secret key, which is set when the fact is posted.

Time spent: 20 hours spent in total

Here is the deployment on Netlify: https://factup.netlify.app/

Required Features

The following required functionality is completed:

  • A create form that allows the user to create posts
  • Posts have a title and optionally additional textual content and/or an image added as an external image URL
  • A home feed displaying previously created posts
  • By default, the time created, title, and number of upvotes for each post is shown on the feed
  • Clicking on a post shall direct the user to a new page for the selected post
  • Users can sort posts by either their created time or upvotes count
  • Users can search for posts by title and textual content
  • A separate post page for each created post, where any additional information is shown is linked whenever a user clicks a post
  • Users can leave comments underneath a post on the post's separate page
  • Each post should have an upvote button on the post's page. Each click increases its upvotes count by one and users can upvote any number of times
  • A previously created post can be edited or deleted from its post page

The following optional features are implemented:

  • Users can only edit and deleted posts or delete comments by entering the secret key, which is set by the user during post creation
  • Upon launching the web app, the user is assigned a random user ID. It will be associated with all posts and comments that they make and displayed on them.
  • Users can repost a previous post by referencing its post ID. On the post page of the new post, the referenced post is displayed and linked, creating a thread
  • Users can customize the interface of the web app
  • Users can share and view web videos
  • Users can set flags while creating a post. Then users can filter posts by flags on the home feed.
  • Users can upload images directly from their local machine as an image file
  • Display a loading animation whenever data is being fetched

The following additional features are implemented:

  • List anything else that you added to improve the site's functionality!

Video Walkthrough

Here's a walkthrough of implemented user stories:

video_walkthrough

GIF created with LICEcap

Notes

Describe any challenges encountered while building the app.

License

Copyright [2023] [Shi Zhang]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

About

A full-stack web application for user to post, vote, and comment on fun facts.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published