mbeps/next_discussion_platform

Full Stack Website for Forum Discussion Platform using Next.JS and Firebase

---

Introducing Circus, a simple yet powerful discussion platform that enables users to engage with each other in a variety of ways. Our platform is similar to popular sites like Reddit and Quora, but with a range of unique features that set us apart.

Our platform is designed to promote engagement and collaboration among users, with a wide range of community management features that enable users to create, subscribe to, and interact with communities on a variety of topics. We also provide a range of features to make it easy for users to create and view posts, including options for images, voting, and sharing.

In addition, we provide a robust set of user authentication and account management features, ensuring that our users have a seamless and secure experience. Users can sign up using email and password or third-party authentication providers such as Google and GitHub, log in and out, reset their password, and modify their profiles.

Our platform is also designed to be user-friendly and accessible, with a responsive UI that can be used on smartphones, tablets, or computers. Whether you're an experienced user or just getting started, Circus has everything you need to engage with others and explore new ideas.

Requirements

These are the requirements needed to run the project:

• Node 18 LTS
• Next.JS 12+
• Firebase V9

Features

Authentication and Account Management

The system has several key user authentication and account management features designed to ensure that users have a seamless and secure experience:

• Users can sign up using email and password
• Users can sign up using third-party authentication providers such as Google and GitHub
• Users can log in using email and password
• Users can log out
• Users can reset their password
• Users can modify their profiles (profile image and username)

Community

The system has several key community management features designed to promote engagement and collaboration among users:

• Users can create communities (different types)
• Users can subscribe and unsubscribe to and from a community
• Admins can change or delete the community logo
• Admins can change community visibility
• Users can view and navigate to all public and restricted communities

Posts

The system has several key features designed to make it easy for users to create and view posts within communities:

• Users can create a post in a specific community with an optional image
• Users can view all posts from a community
• Users can open post to interact with them
• Users can view posts from subscribed communities
• Users can delete a post they have created
• Users can vote on a post
• Users can share a post

Comments

The web application has several key features designed to make it easy for users to engage with others by creating and viewing comments:

• Users can create a comment to reply to a post
• Users can view comments in a post
• Users can delete a comment they created

General

The system has several general features to make the site user-friendly and accessible:

• Logged-in users can view posts from various communities they are subscribed to in the home feed
• Logged-out users can view posts from all communities in order of likes
• System UI is responsive, hence it can be used on smartphones, tablets, or computers

Stack

These are the main technologies that were used in this project:

Front-End

• TypeScript: TypeScript is a superset of JavaScript that adds optional static typing and other features to make the development of large-scale JavaScript applications easier and more efficient. TypeScript enables developers to catch errors earlier in the development process, write more maintainable code, and benefit from advanced editor support.
• Next.js: Next.js is a popular React framework for building server-side rendered (SSR) and statically generated web applications. It provides a set of tools and conventions that make it easy to build modern, performant web applications that can be easily deployed to a variety of hosting environments.
• Recoil State Manager: Recoil is a state management library for React applications that provides a simple, flexible, and efficient way to manage shared state in your app. Recoil is designed to work seamlessly with React and is particularly well-suited for complex or large-scale applications.
• Chakra UI: Chakra UI is a popular React component library that provides a set of customizable, accessible, and responsive UI components for building web applications. Chakra UI is built with accessibility in mind and provides a range of pre-built components that can be easily customized to fit your app's design and branding.

Back-End

• Firebase: Firebase is a mobile and web application development platform that provides a range of tools and services to help developers build high-quality apps quickly and easily. Firebase offers features such as real-time database, cloud storage, authentication, hosting, and more, all of which can be easily integrated into your Next.js app.

Running Application Locally

These are simple steps to run the application locally. For more detail instructions, refer to the Wiki.

1. Clone the Project Locally

git clone https://github.com/mbeps/next_discussion_platform.git

2. Set Up Environment

1. Copy the .env.example file and call it .env.local
2. Populate the .env.local with the required Firebase secrets

3. Set Up Firebase

Set Up Cloud Functions

1. Install Firebase tools

npm install -g firebase-tools

2. Initialise Firebase project

firebase init

3. Deploy cloud functions

firebase deploy --only functions

Set Up Firestore Indexing

Set the following indexes in the Firestore Database under the Indexes section. These are required for querying.

Collection ID	Fields Indexed
posts	communityId Ascending createdAt Descending name Descending
comments	postId Ascending createdAt Descending name Descending

3. Run Project

npm run dev

This should run the project on localhost:3000

Running via Docker

You can build and run the application through Docker. This requires the .env.local file to be completed, refer to installation instructions in the Wiki for setting it up.

Once everything is ready, use the command bellow to run the application.

docker-compose -f docker/docker-compose.yml up --build

Demo

This video demonstrates the features and functionality of the project.

Untitled.mp4

next_discussion_platform's Issues

FEATURE: Complete the community privacy

Is your feature request related to a problem? Please describe.

Implement community privacy functionality:

• Prevent private communities from being accessible if the user is not subscribed
• Prevent users from posting on restricted communities if not subscribed

Describe the solution you'd like

• If the user tries to go to a private community, they would be told that the community is private and do not have access to it
• Private communities are not discoverable on the all communities page
• Users can navigate to restricted communities however they cannot post

Describe alternatives you've considered

Remove community privacy all together

Importance

• High
• Medium
• Low

BUG: Possible for a user to upload files that are too large

Describe the bug

A user can upload a file that is too large. This would take up a lot of unnecessary storage in Firebase Storage.

Reproducing the bug**

1. Create a post
2. Select Image & Video
3. Select a large file

Expected behavior

The system should display a message to the user stating that the file is too large. For example 10MB.

Screenshots

Platforms

Desktop (please complete the following information):

• OS:
• Browser:
• Version:

Smartphone (please complete the following information):**

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FEATURE: Allow sorting

Is your feature request related to a problem? Please describe.

The user cannot currently sort content in order of date, likes, etc.

Describe the solution you'd like

Create a drop down where the user would be able to sort content in a specific order.

Describe alternatives you've considered

None

Screenshots

Importance

• High
• Medium
• Low

FUNCTIONALITY: Community

• Create community
• Get subscribed communities by user
• Subscribe to community
• Unsubscribe to community

Implement Storybooks

Some of the advantages of implementing Storybooks for a web development project:

• Improved code quality and reusability
• Better documentation
• Increased collaboration
• Enhanced testing
• Improved design and UX

BUG: Editing user profile into requires reload

Describe the bug

Whenever the user edits their profile information, the page needs to be reloaded in order to view the data.

Reproducing the bug**

1. Sign into the site with any account
2. Open the user modal by clicking on the profile button and the Profile
3. Edit profile information such as name or profile picture

Expected behavior

When the details are changed, the UI should automatically update to reflect the new data without requiring a reload of the page.

Screenshots

Platforms

All platforms

Additional context

This seems like a simple issue but it is very difficult to fix.This is because it would require the Recoil state to keep track of the user details globally. Right now, there is not global Recoil state keeping track of the user details meaning that if there are changes, the user data needs to be fetched from Firebase.

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

Change normal input field to editable

Some components such as the profile modal and community settings modal have details that can be modified. Currently, 2 different Chakra components are used and managed by a state which keeps track of whether the user is modifying the data. Instead, using the editable field would simplify the code as the same component can function as both. It will be a normal text field but when the user clicks it, it will turn into an input field.

https://chakra-ui.com/docs/components/editable/usage

FEATURE: Community admin can delete the community

Is your feature request related to a problem? Please describe.

None

Describe the solution you'd like

The admin of a community should be able to delete the community. When deleting a community, all the posts and comments of this community should also be deleted.

Describe alternatives you've considered

None

Screenshots

Importance

• High
• Medium
• Low

BUG: Updating Community Snippets

Describe the bug

Updating the image of the community does not update the image in the user's community subscription snippets. Currently, to update the image on the community snippet, the user must unsubscribe and resubscribe. The state of the snippets is updated in the UI but this does not cause the image to be updated in the backend.

Reproducing the bug**

1. Open community settings modal
2. Change image

Expected behavior

When changing the image in the community object, the communitySnippets in the users collection.

Screenshots

The same community does not have the same image URL.

Platforms

Desktop (please complete the following information):

• OS:
• Browser:
• Version:

Smartphone (please complete the following information):**

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

BUG: Going to post page directly using link does not work

Describe the bug

When pasting the link to a specific post, the site redirects to 404 saying that the page (post) does not exist.

Reproducing the bug**

1. Copy link to a post
2. Paste the link into the browser

Expected behavior

The page should load the single post page. The post and any comments should be visible. This functionality was previously functional. It is also required for the sharing feature to work.

Screenshots

Post open from main site

Post opened using link

Platforms

Desktop (please complete the following information):

• OS: Fedora
• Browser: Firefox
• Version: 110.0

Smartphone (please complete the following information):**

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

BUG: Going to all communities page shows previous community icon on menu

Describe the bug

When going to all communities page /communities from a selected the community, the icon for the community menu directory would not change.

Reproducing the bug**

1. Go to any community
2. While in the community page, open the community menu and select "View All Communities"

Expected behavior

When navigating to the communities page, the icon should change to the home one. Additionally, a new icon specifically for the communities page could be implemented.

Screenshots

Platforms

Desktop (please complete the following information):

• OS: Fedora
• Browser: Firefox
• Version: 110.0

Smartphone (please complete the following information):**

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FUNCTIONALITY: Post

• Create post
• Get all posts for a community
• Delete post
• Vote post

BUG: Profile picture squashed

Describe the bug

The profile picture gets squashed and arrow overflow out of the navbar.

Reproducing the bug**

1. Log in to account with profile picture on mobile

Expected behavior

The profile picture should not be squashed and all the elements should remain inside the navbar.

Screenshots

Platforms

Desktop (please complete the following information):

• OS:
• Browser:
• Version:

Smartphone (please complete the following information):**

• Device: OnePlus 8 Pro
• OS: Android
• Browser: Microsoft Edge
• Version: 110.0.1587.66

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FUNCTIONALITY: Cloud Functions

Cloud functions are required for some important actions when data is being deleted from Firestore:

• Delete all posts associated with a community when a community is deleted
• Delete all comments associated with a post when a post is deleted
• Unsubscribe (delete community snippet) when a community is deleted
• Delete all posts associated with a user when a user is deleted

BUG: Deleting post does not delete its comments

Describe the bug

When a post is deleted, the comments remain. These comments are not visible in the UI but they keep existing in the database.

Reproducing the bug**

1. Create a post in a community
2. Create a comment under the post
3. Delete the post
4. Check the Firestore database to see if the comment is still in the database

Expected behavior

When the post is deleted, all the associated comments for that post should also be deleted.

Screenshots

The post does not exist however its comment is still in the database.

Platforms

All platforms

Additional context

Location of the code: ./src/hooks/usePosts.tsx

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FEATURE: Home Feed

• Home feed for authenticated users
• Home feed for unauthenticated users

FUNCTIONALITY: Comment

• Create comment
• Delete comment

FEATURE: Update Profile

Is your feature request related to a problem? Please describe.

The logged in user should be able to update their profile.

Describe the solution you'd like

The modal should display the option to edit the information.

Describe alternatives you've considered

1. Edit button would change the entire modal into editing view
2. Each field can be updated individually by clicking a button

Screenshots

https://github.com/csfrequency/react-firebase-hooks/tree/09bf06b28c82b4c3c1beabb1b32a8007232ed045/auth#useupdateprofile

Importance

• High
• Medium
• Low

BUG: Loading more communities causes refetching

Describe the bug

• When pressing the View More button in the /communities page, all the communities are refetched causing a loading state
• The order of the communities is changed

Reproducing the bug**

1. Go to the /communities page
2. Press View More

Expected behavior

• The new communities should just be added to the existing ones

Screenshots

Platforms

All platforms

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FEATURE: Toast Notifications

Is your feature request related to a problem? Please describe.

Display a toast notification informing the user whether an action has been completed. This toast must be displayed if the result of the action taken in not obvious.

Describe the solution you'd like

Whenever an action is taken, a toast message is displayed (success, error or information).

Describe alternatives you've considered

Screenshots

Chakra UI Toast: https://chakra-ui.com/docs/components/toast

function ToastExample() {
  const toast = useToast()
  return (
    <Button
      onClick={() =>
        toast({
          title: 'Account created.',
          description: "We've created your account for you.",
          status: 'success',
          duration: 9000,
          isClosable: true,
        })
      }
    >
      Show Toast
    </Button>
  )
}

Importance

• High
• Medium
• Low

FEATURE: Show more posts in the home feed

Is your feature request related to a problem? Please describe.

User cannot load more posts in the home feed. Only 10 posts are shown and not any more.

Describe the solution you'd like

Similar to the all communities page, show a button that allows the user to load more posts. Add a check if there are no more posts.

Describe alternatives you've considered

• Automatically load posts when the user reaches the button of the page
• Add pages containing posts

Screenshots

Importance

• High
• Medium
• Low

BUG: Creating post hover effect

Describe the bug

The tab buttons when creating a post have rounded corners. When hovering over these buttons, they are no longer rounded.

Reproducing the bug**

1. Go to create post page
2. Hover over any tab button

Expected behavior

The buttons should remain rounded when hovering.

Screenshots

Platforms

Desktop (please complete the following information):

• OS: Fedora Linux 36
• Browser: Firefox
• Version: 110.0

Smartphone (please complete the following information):**

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FUNCTIONALITY: Authentication

• Sign up using email and password
• Log in using email and password
• Continue using Google and GitHub
• Reset password for email and password accounts

FEATURE: Firestore Rules

Is your feature request related to a problem? Please describe.

There is a chance that people can access the database externally. All the checks are done by the application but the database itself does not checks.

Describe the solution you'd like

Implement some security rules which would create errors if unauthorised actions are done.

Describe alternatives you've considered

No alternatives

Screenshots

Importance

• High
• Medium
• Low

BUG: Broken communities UI on mobile

Describe the bug

When the names of the community are too long, the everything on the right of the communities components are shifted outwards. This only happens on mobile where there is a size constraint.

Reproducing the bug**

1. Go to all communities section
2. Press on more communities

Expected behavior

The buttons should remain inside the component.

Screenshots

Platforms

Smartphone (please complete the following information):**

• Device: S21 Ultra
• OS: Android 14
• Browser: Chrome
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FEATURE: User delete account

Is your feature request related to a problem? Please describe.

No

Describe the solution you'd like

Allow users to delete their accounts. This should delete all their data stored in Firebase Storage, their posts and comments.

Describe alternatives you've considered

None

Screenshots

Importance

• High
• Medium
• Low

FEATURE: Show message to navigate to community when trying to create post from home

Is your feature request related to a problem? Please describe.

The user cannot create a post from the home page, only the community page.
When the user tries to create a post from the home page, the community directory is opened but it is unclear that the user should navigate to a community in order to create the post.

Describe the solution you'd like

A simple solution is to show a toast message that the user should select a community first and then create the post.

Describe alternatives you've considered

Take the user to a post submission page where there is an extra drop down to select the community.

Screenshots

Importance

• High
• Medium
• Low

FEATURE: Add loading status to pages

Is your feature request related to a problem? Please describe.

When the user navigates to another page, there is a delay as the data is being fetched. This makes the website seem unresponsive as the user does not know that the data is still being fetched.

Describe the solution you'd like

While the data is being loaded, show a loading spinner.

Describe alternatives you've considered

Screenshots

Importance

• High
• Medium
• Low

FEATURE: Admin can delete any post in a community

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Allow the admin to delete a post in their community the same way posts are deleted by its creator. This is for moderation purposes.

Describe alternatives you've considered

Screenshots

Importance

• High
• Medium
• Low

FEATURE: Allow searching for communitities and posts

Is your feature request related to a problem? Please describe.

Currently, it is not possible to search for content making it difficult for users to find specific things.

Describe the solution you'd like

• In the home page and community page, the search would search for communities that exist.
• In the community pages, the search would search for posts in the respective community

Describe alternatives you've considered

• Search would search in the entire site.

Screenshots

Importance

• High
• Medium
• Low

FEATURE: Dark Mode

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Allow dark mode across the UI.

Describe alternatives you've considered

None

Screenshots

Importance

• High
• Medium
• Low

FEATURE: Confirmation dialogues

Is your feature request related to a problem? Please describe.

Some actions (deleting posts, comments, etc) can triggered accidentally and are irreversible.

Describe the solution you'd like

Display a confirmation dialogue to the user asking if they are sure they wish to proceed.

Describe alternatives you've considered

None

Screenshots

From: https://chakra-ui.com/docs/components/alert-dialog

Importance

• High
• Medium
• Low

FEATURE: Verification Email

Is your feature request related to a problem? Please describe.

Currently, any email can be used to create an account. No verification email is sent which can lead to fake email usage and impersonations.

Describe the solution you'd like

• When the user signs up, send a verification email with a link to verify.

Describe alternatives you've considered

None

Screenshots

Importance

• High
• Medium
• Low

BUG: User not redirected back to community when creating post

Describe the bug

When submitting a post with an image, the site redirects the user back to the community page as expected. However, when the user submits a post with no image, the user is not redirected back.

Reproducing the bug**

1. Create a new post
2. Add required title and body but no picture.
3. Click submit.

Expected behavior

After the user clicks submit, they should be redirected to the community page.

Screenshots

Platforms

Desktop (please complete the following information):

• OS:
• Browser:
• Version:

Smartphone (please complete the following information):**

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

Admin Work

• Create Wiki
• Add screenshots to progress in releases
• Update ReadMe file
• Add issue templates
• Add license
• Add Pipeline

Project Improvements

• Add NX.JS monorepo
• Add testing
• Add Storybooks (which includes UI testing)
• Add CICD pipelines
• Deploy project to Vercel

REFACTOR: Signup

Refactoring signup.tsx

import { Button, Flex, Input, Text } from "@chakra-ui/react";
import React, { useState } from "react";
import { useCreateUserWithEmailAndPassword } from "react-firebase-hooks/auth";
import { useSetRecoilState } from "recoil";
import { authModalState } from "../../../atoms/authModalAtom";
import { auth } from "../../../firebase/clientApp";
import { FIREBASE_ERRORS } from "../../../firebase/errors";

/**
 * Allows the user to create an account by inputting the required credentials (email and password).
 * There are 2 password fields to ensure that the user inputs the correct password.
 * If the 2 passwords do not match, the account is not created and an error is displayed.
 * If the email already exists, the account is not created and an error is displayed.
 *
 * A button to log in instead is available which would switch the modal to the log in view when clicked.
 * @returns Sign up components view for modal.
 * @see https://github.com/CSFrequency/react-firebase-hooks/tree/master/auth
 */
const SignUp = () => {
  const setAuthModalState = useSetRecoilState(authModalState); // Set global state
  const [signUpForm, setSignUpForm] = useState({
    email: "", // Initially empty email
    password: "", // Initially empty password
    confirmPassword: "", // Initially empty confirm password
  });
  const [error, setError] = useState(""); // Initially empty error
  const [
    createUserWithEmailAndPassword, // returns a function that returns the user, loading or error
    user,
    loading,
    userError,
  ] = useCreateUserWithEmailAndPassword(auth);

  /**
   * This function is used as the event handler for a form submission.
   * It will prevent the page from refreshing.
   * Checks if the password and confirm password fields match and the password requirements are met:
   *    - If they do not match, an error message is set and the function returns without creating a new user.
   *    - If the password does not meet the requirements, an error message is set and the function returns without creating a new user.
   *    - If the passwords match and the password meets the requirements, a new user is created using the email and password provided in the form.
   * @param event (React.FormEvent): the submit event triggered by the form
   * @returns None
   */
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault(); // Prevent the page from refreshing
    if (error) setError(""); // If there is an error, clear it
    if (signUpForm.password !== signUpForm.confirmPassword) {
      // If the password and confirm password don't match
      setError("Passwords don't match"); // Set error
      return; // Return so that the function doesn't continue
    }
    if (signUpForm.password.length < 8) {
      setError("Password must be at least 8 characters long");
      return;
    }
    if (!/\d/.test(signUpForm.password)) {
      setError("Password must contain at least 1 number");
      return;
    }
    if (!/[!@#$%^&*(),.?":{}|<>]/.test(signUpForm.password)) {
      setError("Password must contain at least 1 special character");
      return;
    }
    if (!/[A-Z]/.test(signUpForm.password)) {
      setError("Password must contain at least 1 capital letter");
      return;
    }

    createUserWithEmailAndPassword(signUpForm.email, signUpForm.password); // Create user with email and password
  }; // Function to execute when the form is submitted

  /**
   * Function to execute when the form is changed (when email and password are typed).
   * Multiple inputs use the same onChange function.
   * @param event(React.ChangeEvent<HTMLInputElement>) - the event that is triggered when the form is changed
   */
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // Update form state
    setSignUpForm((prev) => ({
      ...prev, // Spread previous state because we don't want to lose the other input's value
      [event.target.name]: event.target.value, // Catch the name of the input that was changed and update the corresponding state
    }));
  };

  return (
    <form onSubmit={onSubmit}>
      <InputField
        name="email"
        placeholder="Email"
        type="email"
        onChange={onChange}
      />

      <InputField
        name="password"
        placeholder="Password"
        type="password"
        onChange={onChange}
      />

      <InputField
        name="confirmPassword"
        placeholder="Confirm Password"
        type="password"
        onChange={onChange}
      />

      {/* If there is error than the error is shown */}

      <Text textAlign="center" color="red" fontSize="10pt" fontWeight="800">
        {error ||
          FIREBASE_ERRORS[userError?.message as keyof typeof FIREBASE_ERRORS]}
      </Text>

      <Button
        width="100%"
        height="36px"
        mt={2}
        mb={2}
        type="submit"
        isLoading={loading} // If loading (from Firebase) is true, show loading spinner
      >
        {" "}
        {/* When the form is submitted, execute onSubmit function */}
        Sign Up
      </Button>

      <Flex fontSize="9pt" justifyContent="center">
        <Text mr={1}>Already a Clown? </Text>
        <Text
          color="red.500"
          fontWeight={700}
          cursor="pointer"
          onClick={() =>
            setAuthModalState((prev) => ({
              ...prev,
              view: "login",
            }))
          }
        >
          Log In
        </Text>
      </Flex>
    </form>
  );
};

export default SignUp;

interface InputFieldProps {
  name: string;
  placeholder: string;
  type: string;
  onChange: React.ChangeEventHandler<HTMLInputElement>;
}

const InputField: React.FC<InputFieldProps> = ({
  name,
  placeholder,
  type,
  onChange,
}) => {
  return (
    <Input
      required
      name={name}
      placeholder={placeholder}
      type={type}
      mb={2}
      onChange={onChange}
      fontSize="10pt"
      bg="gray.50"
      _placeholder={{ color: "gray.500" }}
      _hover={{
        bg: "white",
        borderColor: "red.400",
        border: "1px solid",
      }}
      _focus={{
        outline: "none",
        bg: "white",
        borderColor: "gray.500",
        border: "1px solid",
      }}
    />
  );
};

This code takes the common elements between all the atoms and creates a component. The unique elements such as placeholder, name, type and onChange are passed as props.

BUG: Improve password validation

Describe the bug

When entering an inappropriate password (too short), the system does not display any errors and there is no clean message informing the user whether the account has been created or not.

Reproducing the bug

1. Try to sign up using email and password
2. Enter password that is too short new1

Expected behavior

• The account should not be created with such a weak password. The system should force the user to use a strong password. If the requirements are not met, return an error informing the user that the password should be longer.

Screenshots

Platforms

Desktop (please complete the following information):

• OS:
• Browser:
• Version:

Smartphone (please complete the following information):

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FEATURE: Implement saving posts

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Allow user to click on the save button to save certain posts so that they can be found easily. Open a new page similar to the community and home pages which would show the saved posts.

Describe alternatives you've considered

Screenshots

Importance

• High
• Medium
• Low

BUG: User can upload other file types during posts

Describe the bug

When creating a post, the user is able to upload an image. However, in that dialogue, the user is able to upload any file type which is no even displayed by the system.

Reproducing the bug**

1. Go to create post page
2. Add required post title and optional body.
3. Go to Image & Video and upload another file type

Expected behavior

The system should return a message telling the user that only images are allowed.

Screenshots

Platforms

Desktop (please complete the following information):

• OS:
• Browser:
• Version:

Smartphone (please complete the following information):**

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)