tr-vs / realist Goto Github PK

We will need a sign in page to accompany the sign up page. It should be fairly similar to how the SignUpPage and SignUp components were made.

Below are the themes that SignUp used. Of course we will need to modify this theme a bit and import it into SignInPage.

Here is the entire workflow/steps to get this job done.

1. Make sure the branch is properly updated. In the terminal run:
   git checkout main
git pull

2. Before we write our code lets make a new branch:
   git checkout -b SignInBranch

3. Time to code: Below are the steps:

_Steps to complete

1. Place the code from the link below into our SignIn.js component
2. We only need the email and password as our input boxes. Remove/alter any unnecessary input fields.
3. Remove any unneeded images, we will style this later.
4. Place "ReaList" where necessary, do not worry about links for now, we will fix these later._

4. Once you are done with implementation update your local branch with any new changes from main:
   git merge main

5. Stage and commit your changes to the remote branch:
   git add .
git commit -m <Your-message>

Please make it clear what you did in your message

6. Move the local branch changes to the remote branch. Since this is a new branch we do:
   git push --set-upstream origin SignInBranch

for other changes just do the command git push

7. Create a pull request on here and wait for a merge :)

**Sign in Theme **
https://github.com/mui/material-ui/blob/v5.14.15/docs/data/material/getting-started/templates/sign-in/SignIn.js

On our homepage we need an icon/button to represent the users profile, and when we click on it it redirects to that users page. This icon could also be used for redirecting to other users profiles. We will need a ProfileIcon component.

For now just create a circular image/component with some sort of placeholder image and it should be able to handle a click and redirect to a page, we will deal with redirects later for now just let it handle a click.

Tutorial

Follow these steps to create the icon component:

1. Make sure the branch is properly updated. In the terminal run:

git checkout main
git pull

2. Before we write our code lets make a new branch:
   git checkout -b <BranchName>
   Remember: can be any name (like profileIcon)

3. Time to code:

Code Tutorial:

Here are the steps to make the component.

Within the templates folder you will want to make a new file called ProfileIcon.js

within the folder start with some boilerplate code:

const ProfileIcon = () => {
    return (
         

    ); 
};
export default ProfileIcon;

Within the return we will need something to house an image. Fill with <img ' src="" alt="" />

Now what belongs in the src tag can just be a default profile photo, like one instagram uses. We will fill in the image later .
We are now done with making the component.

Optional:
Of course if you can, make a ProfileIcon.css file and apply styles to the img tag. This would require a className within the image tag, which you then style in the css file, specifically adding a border-radius: 50%; and adjusting the image size as one deems fit

4. Once you are done with implementation update your local branch with any new changes from main:
   git merge main

5. Stage and commit your changes to the remote branch:

git add .
git commit -m <Your-message>

Please make it clear what you did in your message

6. Move the local branch changes to the remote branch. Since this is a new branch we do:

git push --set-upstream origin <Your-Branch-Name>

7. Create a pull request :)

Here are some useful resources:

https://react.dev/learn/your-first-component
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
https://www.w3schools.com/css/css3_images.asp

On our landing page the button that hovers at the bottom of the screen has some sizing issues. Depending on the window size the text within the button stacks on itself. We want, for the most part, for the text to remain on one line.

Possible ways to fix
Looking at the code we either can:

• Fix the text size
  or

• Fix how the button sizing works.

The job is to figure out which solution is best.

WE ARE IN THE ENDGAME. Last week and a half, while we are very close to finishing we still have a couple issues to address

Crucial Issues

• Implementation of the following page
• Search bar implementation
• Followers and following bar and implementation
• Styling fixes

General Issues

• Reactions for posts
• Compatibility score based on music taste

Cool ideas to add

• Generating a playlist or "ReaList"

Below I have some implementation ideas for each issue

Following Page

It seems that it will function similarly to the community page. We will just need to access each user Id that one follows and fetch their info.

We do need to change the button and the title. Which I made an issue for.

Search Bar implementation

We will need to fetch all the current users in the database and place them into an array. Given that we don't have the option for users to delete their account we could just load all users into an array (or some data structure) to prevent having to fetch multiple times. Of course, we will have to account for new user creation and whether we append that user to the array or some other implementation.

Then we will also have to implement the search part. My idea is when a user is going to type a username some suggestions already pop up below the search bar (like how google does it). I have an example that I worked on before. It requires only javascript and the map function.

Following and follower

Right now we have placeholders for both. On a user's profile page we have a button to follow as well. Both counts can be measured through some form of array or storage of user ids in the database, and we just have to count them.

Another thing that I would like to have is a popup window that shows a list of either followers or following when you click on the text in the profile page. i'll make an issue on it for anyone that wants to try.

Styling Fixes

The main part with this is to make sure all styles and animations are consistent, specifically with varying size windows and screens. I know the nav bar will need some fixing along with other components. The main fixes will have to do with changing component sizes based on screen size, which there are many resources to help with this. This should be saved as a final issue.

We want the Get Started button to not exceed the horizontal bar that separates the footer component from the rest of the page.

Right now, we have placeholders for our top artists and top song embeds for both the user profile page and other user profile page. We already have all the necessary data in an array stored, we just need to map through the array, get the id's and pass each id into the embed.

When a user hovers over either followers or following on the profile page, the component should either underline or change color on hover, the cursor should also be a pointer.

In getNowPlaying(), when an ad is being played data.name returns null and it breaks the code.

Right now the search bar is working, but on a placeholder array of our usernames. What we will need is to fetch an array (or other data structure) of both profile photos and usernames, then pass each to the UsernameHolder component

When we visit a user's profile page it currently says "Your Top Artists..." and "Your Top Songs...", we want it so that their username is in the place of your.

Possible solutions
Either we can create another component or we modify the existing component to take in a username prop, with the default value being set as "Your".

What we have

What we want

For first time/non users, we will need a landing page which can then redirect them to sign up

For the sign in page, when a user incorrectly inputs their email or password, the text field should highlight red.

Currently the functions in the spotify.js don't work as intended due to the await & .then commands being used. Need a fix on how to work with the async functions. Also need to be able to display errors.

Currently, all the links in the footers open the UCLA homepage. However, in the same way we want to open the GitHub page by clicking on GitHub in the footer, we have to change the links for the rest of the footer items accordingly. For example, clicking on About Us should open an About Us page (which hasn't been created).

So first, we need to make these pages:

1. About Us Page
2. Donation site (buy me a coffee? paypal?)
3. Linktree to our LinkedIns
   (and any others that we may add in the future)

Then we have to link those pages to the corresponding text in the Footer.

Currently we have "Friends" on our button and "Friends Music". We will need to change that to "Following" and the same for the title.

Currently spotify.js doesn't catch errors so we need to be able to catch them.

as we are replacing the current login method with passkeys, this requires using a new authentication method. I have already set this up, but it is rather bland so we just need to make it prettier.

Currently the way to do this is to edit the props for the PassageTheme component. For reference on what we can edit specifically, check here.

As an example, below, I have made the background color orange :D

The file to edit isfrontend/rea-list/src/pages/LoginPage.js. If you can't find this file, checkout the branch passkeysimplementation

For now, there is no vision for the end result, but a good attempt will be maybe to make it look similar to the original. Of course, not everything will carry over (like the gradient border I think)

We will need a sidebar component for our home page. It will display user information and statistics.

It will be of this style

More Information of this Issue will be added

For a good portion of the styles, we are using px to determine the width and height of elements. We need to convert these to vh or some other scalable sizing. This is evident in the navbar, as the collapsing the screen pushes all the elements together. Use something like the link below to convert px sizes to vh or rem (whatever fits best.

Right now we have a profile page that get's the job done, but we will want to do a redesign.

There are a few things to do.

We will not be using the Most Compatible friends, so we can remove that

Things to start with:

• Remove the "Most Compatible Friends" section within the UserStats component
• Next to the place holder images on the "Your Top Songs:" and "Your top Artists" include placeholder text next to each placeholder image.

Issue still being made

We will need a simple navbar component. This will be used to toggle whether we see the "Friends" or "Community" content on our home page.

Just get the html components on the navbar, if you can also add the component in the div with className "navbar". Do not worry about styling yet, we will deal with that later.

It should look like this.

Resources:

Creating a React Component:
https://react.dev/learn/your-first-component

Basic HTML
https://www.w3schools.com/html/html_basic.asp

Currently, when a is singing into the website they are unable to see what they are typing. To make things easier include a button or a checkbox that enables the user to see the password they are typing.

when logging in, the email is case sensitive, when it shouldnt be

Right now we only have a user profile page, we will also need a profile page for all other users.

Here are the steps:

(This is under the assumption that you have already made a the proper files and css files)

1) Let's consider the profile page. It is composed of the ProfileNavbar UserHead and UserStats components.
This page will also want to use these. Thus we import them at the very top of our code.

import UserStats from '../templates/UserStats.js';
import UserHead from '../templates/UserHead.js';
import ProfileNavbar from '../templates/ProfileNavbar.js';

Now we begin to build the page.

Our code should look something like

import UserStats from '../templates/UserStats.js';
import UserHead from '../templates/UserHead.js';
import ProfileNavbar from '../templates/ProfileNavbar.js';

const OtherProfile = () => {
     return (
          <h1>Other Profile Page</h1>
     )

export default OtherProfile

2) Now we build the page with our components.

within the return (... we first include our jsx opening and closing tabs <> and </>

Thus looking like:

 return (
          <>

           {*/ Our Code /*}

          </>

     )

Now we lets first include <ProfileNavbar/> between the jsx tag like so:

 return (
          <>

           <ProfileNavbar/>

          </>

     )

We should be able to see a simple navbar on the top of our page.

3) Now lets add UserHead into our code.

First we create a div for all the page contents, that is separate from the ProfileNavbar
then we include UserHead into this div

 return (
          <>
              
           <ProfileNavbar/>

           <div className='profile-contents'>
                <UserHead />
            </div>

          </>

     )

<UserHead/> actually takes in props for the profile photo and username (but we will omit these for now)

Now we should see a photo of Drake with his silly username next to it.

4) Now we just also add UserStats to the div right below UserHead

Now our skeleton for the other users profile page should be done. Make sure to test on your local machine. Consult with Kevin or Travis when you are ready to commit and merge to prod.

(If you can also try to get a Follow button added, it should be right below UserHead)

Please let me know if there are any other issues
Good Luck :)

The current spacing on the sidebar is a bit off. Fix the sizing of the fonts and spacing to make it less awkward. Keep in mind the three embeds.

Place the proper links on the footer, we also will need to place it at the bottom of the home page.

• revamp user auth method
• fix bug for new users whenever they connect their spotify
• when users' jwt tokens expire, they should be signed out
• passage email formatting
• return top artists/songs id
• create playlist

• clicking the signin link when on the signup page redirects you to /loginpage rather than /login
• "Friend's" should be "Friends'" on the home page I think because plural
• "Compatible" is spelled "Compatable" on the profile page 😭

Title

Currently our sign up page will add a user to the database, but only if all input fields are filled in correctly.

Since we are all human, there are bound to some errors for new users (using a taken username, bad password, invalid email, etc)

We will need to display these errors on the sign up page. It should prevent a user submission to the database and instead display a message which echos what the issue is.

There is plenty of white space to display this message, if anything we can move the sign up box to the side. We also could make a popup to display the error. We will discuss this.

You will get free cupcakes if you make the entire app for free :)