Jamlink is a web application created during the Ironhack bootcamp, providing a social platform for musicians. The application aims to connect musicians who want to organize and participate in jam sessions. Some key features of Jamlink include:
- Musician Profile: Create and customize your musical profile, showcasing your instruments, skills, and preferences.
- Social Network: Connect with other musicians, add them as friends, and discover new musical talents in the community.
- Jam Events: Create your own jam session events, specifying the date, time, location, and desired instruments.
- Event Participation: Join jam session events organized by other musicians, indicating the instrument you'd like to play.
- Friends List: Build a list of musical friends with whom you can interact, collaborate, and organize private jam sessions.
- Comment Interaction: Leave comments on events and profiles of other musicians to encourage communication and collaboration.
Make sure you have Node.js installed on your machine before getting started.
Follow the steps below to setup the application in your local development environment:
- Install dependencies
npm install- Run the application
npm run devThe application will open automatically on localhost (port 5173 if it's not in use already).
To create a production build
npm run buildThe following commands can be found in the package.json file in the project root. To execute them, simply use the command the following way:
npm run <command>
| Command | Description |
|---|---|
dev |
Starts the Vite development server. |
build |
Builds an optimized version for production. |
lint |
Runs ESLint to check and fix the code. |
preview |
Launches a preview of the generated application. |
| Variable | Description |
|---|---|
VITE_API_URL |
Url from the API |
VITE_APP_SITE_TITLE |
App title |
VITE_REACT_APP_GOOGLE |
Google key |
The file structure in the Jamlink front-end is organized as follows:
.
|-- .github/
|-- public/
|-- src/
| |-- assets/
| |-- components/
| |-- contexts/
| |-- pages/
| |-- routes/
| |-- services/
| |-- utils/
| |-- App.css
| |-- App.jsx
| |-- index.css
| |-- main.jsx
|-- .eslintrc.cjs
|-- .gitignore
|-- README.md
|-- index.html
|-- package-lock.json
|-- package.json
|-- vite.config.js
-
Front-end:
- React - JavaScript library for building user interfaces.
- Vite - Fast development tool for JavaScript and TypeScript-based projects.
- HTML - Markup language for web page structure.
- CSS - Style sheet language for styling the user interface.
- JavaScript - Programming language for client-side logic.
- Bootstrap - CSS framework for fast and responsive web development.
- Google Autocomplete - Google Maps Autocomplete component.
-
Tools and Utilities:
- GitHub Actions - For continuous integration and automatic deployment.
| Client routes | ||
|---|---|---|
| URL | Description | Protected |
| / | Index page | |
| /events | Events gallery page | |
| /events/details/:id | Events details page | ✔ |
| /event/create | New event from page | ✔ |
| /event/edit/:id | Edit event form page | ✔ |
| /signup | Signup page | |
| /login | Login page | |
| /user/profile/:id | User profile page | ✔ |
| /user/community | User gallery page | ✔ |
| /user/edit/:id | Edit user page | ✔ |
This project uses various technologies and resources, each with its respective licenses. Below is the license information for the main technologies and tools used in the front-end:
- React: MIT License
- Vite: MIT License
- HTML: HTML License (Note: HTML generally doesn't have a specific license)
- CSS: MIT License
- JavaScript: MIT License
- Bootstrap: MIT License
- Google Autocomplete: Google Maps Platform Terms of Service
- GitHub Actions: GitHub Terms of Service
Created by Nacho Sanson.
Contributors: