This project contains the frontend of the Tijdloze Website. It is built as a single page application with Vue.js and the Nuxt framework. There is a separate API project that provides the backend.
The Tijdloze Website is maintained by Stijn Vermeeren. Other contributions to improve the functionality and/or the layout of the website are very welcome. Please reach out if you are interested in contributing.
To get started quickly, it is recommended to run the API and the database using Docker Compose. A docker-compose.yml file to start two containers, one for the API and one for the database, is provided. The official images are hosted on Docker Hub as stijnvermeeren/tijdloze-api and stijnvermeeren/tijdloze-db.
The database image comes with:
- All data about artists, albums, songs and list entries.
- Four dummy users from the
stijnvermeeren-tijdloze-dev.eu.auth0.comAuth0 domain, all with password "secret":user1@example.comuser2@example.comadmin1@example.com(Admin user)admin2@example.com(Admin user)
If you don't want to use the Docker images, it is also possible to build and run the API project from the source. Instructions can be found in the tijdloze-api project.
The following environment variables can be defined (e.g. in a .env file) to configure the application:
API_URI_CLIENTAPI_URI_SERVERAUTH0_CLIENT_IDAUTH0_CLIENT_DOMAINAUTH0_AUDIENCEAUTH0_CALLBACK_URIAUTH0_LOGOUT_URIGOOGLE_ANALYTICS_ID
The defaults from nuxt.config.ts should work out-of-the-box when running the API using default Docker Compose file.
The URI for the API can be different on the client side (i.e. in the browser of a visitor of the website) and on the server side (i.e. in the Node.js process running Nuxt).
API_URI_CLIENT=http://localhost:9000/API_URI_SERVER=http://localhost:9000/
The Tijdloze Website is designed to work with Auth0 for authentication and authorization. An Auth0 domain stijnvermeeren-tijdloze-dev.eu.auth0.com has been set up that can be used for development purposes (though without the ability to create new users beyond the ones listed above under API and database). To use your own Auth0 domain, these settings must be adjusted accordingly.
AUTH0_CLIENT_ID=bDIm5fEwDBV0IBv5tRb48IPwLhFeysSBAUTH0_CLIENT_DOMAIN=stijnvermeeren-tijdloze-dev.eu.auth0.comAUTH0_CALLBACK_URI=http://localhost:3000/auth/callbackAUTH0_LOGOUT_URI=http://localhost:3000/AUTH0_AUDIENCE=dev.tijdloze.stijnshome.be
An optional Google Analytics ID can be provided to activate web tracking.
GOOGLE_ANALYTICS_ID=
Run npm install.
Run npm run dev. The application will be accessible at localhost:3000.
Recommendations for running this application in a production environment can be found in Production.md.
