https://github.com/turhansel/songish
songish is an application that allows users to add their songs information. built with React.js, Next.js, TailwindCSS, MongoDB
https://github.com/turhansel/songish
javacript mongodb nextjs react tailwindcss
Last synced: 4 months ago
JSON representation
songish is an application that allows users to add their songs information. built with React.js, Next.js, TailwindCSS, MongoDB
- Host: GitHub
- URL: https://github.com/turhansel/songish
- Owner: turhansel
- Created: 2021-05-19T16:01:47.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T09:30:50.000Z (almost 3 years ago)
- Last Synced: 2023-07-19T10:41:10.263Z (almost 3 years ago)
- Topics: javacript, mongodb, nextjs, react, tailwindcss
- Language: JavaScript
- Homepage: https://songish.vercel.app/
- Size: 5.62 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Songish
[](https://github.com/turhansel/songish/blob/master/LICENSE)
## 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](https://songish.vercel.app/)_**
### Tech Stack
- [NextJS](https://nextjs.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [MongoDB Atlas](https://www.mongodb.com/cloud/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://:@my-project-abc123.mongodb.net/test?retryWrites=true&w=majority
```
For more details, follow this [MongoDB Guide](https://docs.mongodb.com/guides/server/drivers/) 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):
```bash
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
```bash
npm install
npm run dev
# or
yarn install
yarn dev
```
- Your app should be up and running on [http://localhost:3000](http://localhost:3000)
- If you want to see the database in local you can go [http://localhost:3000/api/songs](http://localhost:3000/api/songs)
- To see database in production [https://song-app-fullstack.vercel.app/api/songs](https://songish.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](https://www.theaudiodb.com/api_guide.php)
## Deploy your own
Once you have access to [the environment variables you'll need](#step-2-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
[](https://vercel.com/new/git/external?repository-url=https://github.com/turhansel/songish&project-name=songish&repository-name=songish&env=MONGODB_URI&envDescription=Required%20to%20connect%20the%20app%20with%20MongoDB&envLink=https://github.com/vercel/next.js/tree/canary/examples/songish%23step-2-set-up-environment-variables)