Rhythm n’ Flow

Link

Rhythm n’ Flow

Rhythm n' Flow. Create your own songs and album

1. Pull the project

2. Set up a bucket in Amazon Web Services AWS

3. 2 set up your local environment Create a .env file within the backend directory and set up the following:

• PORT= port number to run the system off of
• DB_FILE= the location of the sqlite3 file ex. db/dev.db
• JWT_SECRET= JWT secret key
• JWT_EXPIRES_IN= expiration time frame for the security token
• AWS_ACCESS_KEY_ID= Amazon web services id
• AWS_SECRET_ACCESS_KEY= Amazon web services access key

Open up the project in your chosen IDE. Open up a terminal and in the frontend, backend and and root directories. Run

npm install

To run the app locally, open up two separate terminals in backend and frontend. Run npm start in both directories simultaneously. The port linked to your front end will print up the root page.

Features

• Full crud for songs
• Full crud for albums
• Mobile compatible of all screen sizes
• User creation
• User login
• Bycrypt secure

Navigation

Landing page

The app will start at the landing page. In order to have full access to the app, you must either log in or create a user to log in. A demo user has been created for convenience.

Albums

The albums page allows the user to scroll through the selection of albums available for interaction. Each album comes with a link to it's details for a further look into the album, as well as a list of songs on the album.

Album Details

The album details page displays the album's cover image and description. Underneath the pic will be a list of songs belonging to the album.

Songs

The songs page lists every song that is within the collection of the site. Each song page has a link to it's details page.

Song Details

The song details page allows for a user to look at the details of the page. The page will display the image of the song and it's details.

CRUD Control flow

Each user has the ability to create an album instantly.

On user owned albums the user possess the ability to create songs on the album. The user can also edit or delete the album's details.

On the song if the user has owner ship of the song, the user has the ability to edit or delete the song.

Tech implementation

The primary way of controling the capacity a user's capabilities over data is if the user does or does not have ownership of the song or album. If the user owns the album or song, the crud buttons will display for the song or album. If the user does not own the song or album, then the buttons will not display. Control flow was accomplished by manipulating the architecture of the environment checking if the user's ID matched with the song or album owner ID. Ex:

            {(user.id === album.userId) &&
                (
                    <div className='album-button-divs'>
                        <EditAlbumModal album={albumId} />
                        <button className='delete-album-button' onClick={deleteAlbum}>Delete Album</button>
                        <CreateSongModal />
                    </div>
                )
            }

Tech stack composition

• react
• sequelize
• bcrypt
• csrf
• aws
• heroku
• express
• node