Songish

I developed a FullStack project to improve myself.

Songish is an application that allows users to add their songs information (e.g., title, artist name, difficulty, category, imageurl, songurl, description and date). They can also delete it or edit it anytime. And when you listen to the song on the detail page, the process on the main page appears.

I used NextJS which is React Framework for SSR

Songish

Tech Stack

• NextJS
• TailwindCSS
• MongoDB Atlas

How to use

Configuration

Step 1. Get the connection string of your MongoDB server

In the case of MongoDB Atlas, it should be a string like this:

mongodb+srv://<username>:<password>@my-project-abc123.mongodb.net/test?retryWrites=true&w=majority

For more details, follow this MongoDB Guide on how to connect to MongoDB.

Step 2. Set up environment variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then set each variable on .env.local:

• MONGODB_URI should be the MongoDB connection string you got from step 1.

Step 3. Run Next.js in development mode

npm install
npm run dev

# or

yarn install
yarn dev

• Your app should be up and running on http://localhost:3000
• If you want to see the database in local you can go http://localhost:3000/api/songs
• To see database in production https://song-app-fullstack.vercel.app/api/songs

If you want to see the biography of the artist, you should click the more information button on the detail page. I fetched this data from https://www.theaudiodb.com/api_guide.php

Deploy your own

Once you have access to the environment variables you'll need, deploy the example using Vercel: