Web Development Final Project - FutHub

This web app: Allows football users to socialize and interact with one another

https://fut-hub.vercel.app/

Demo

Documentation

1. NextJS updated docs - https://nextjs.org/docs
2. Supabase upgraded v2 docs - https://supabase.com/docs/reference/javascript/installing
3. Tailwind docs - https://v2.tailwindcss.com/docs/utility-first

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• yarn

  npm install --global yarn
  

Installation

1. Clone the repo

   git clone https://github.com/ahmadbasyouni10/FutHub
   

2. Create Next App

   yarn create next-app .
   

3. Setup Tailwind

   yarn add tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

4. Add supabase

   yarn add @supabase/supabase-js
   

5. Add your own supabase key and url .env

   NEXT_PUBLIC_API_KEY = "YOUR API KEY";
   NEXT_PUBLIC_supabaseURL = "YOUR API URL
   

6. Create tables in supabase with following foreign relations and create insert, update, and delete row policies

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue.

1. Fork the Project
2. Create your Feature Branch
3. Commit your Changes
4. Push to the Branch
5. Open a Pull Request

Features

• 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
• 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
• 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 customize the interface of the web app
• 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

• Login page using google and supabase auth
• Profile Page lets user edit their banners and pfps
• Commenting on posts
• Favoriting posts

License

Ahmad Basyouni 2024