Learn how to use Contentful by keeping track of your favorite albums per month. Built using Nuxt.js and Contentful.

Overview

A Year in Music

Learn how to use Contentful by keeping track of your favorite albums per month. Built using Nuxt.js and Contentful.

Screenshot of Year In Music example project

Setup Links

See how to setup here

Example Demo

View live demo here

Getting Started

Clone this repository to create your own version of this project.

Configuration

Step 1. Create an account and a space on Contentful

First, create an account on Contentful.

After creating an account, create a new empty space from the dashboard and assign to it any name of your liking. If you already have a Contentful space, you can add the content model needed for this project to your existing space.

Step 2. Create a content model

The content model defines the data structures of your application/websites. The structures are flexible and you can tailor them to your needs.

For this example you need to create a content model that defines an album. You can create this by running a script or by doing it manually to familiarize yourself with the Contentful user interface.

Run a script to create the content model

This project includes a setup script which you can use to set up the content model expected by the source code.

In your Contentful dashboard go to Settings > General Settings and copy the Space ID.

Next, go to Settings > API > Content management tokens and create a new token by clicking Generate personal token. This token has the same access rights as the logged in user. Do not share it publicly, you will only use it to set up your space and can delete it afterwards.

With the space ID and management access token at hand run the following command:

npx cross-env CONTENTFUL_SPACE_ID=YOUR_SPACE_ID CONTENTFUL_MANAGEMENT_TOKEN=XXX npm run setup

This command will create the needed content structures and set up your Contentful space ready to use. The output should look as follows:

> node ./contentful/setup.js $CONTENTFUL_SPACE_ID $CONTENTFUL_MANAGEMENT_TOKEN

┌──────────────────────────────────────────────────┐
│ The following entities are going to be imported: │
├─────────────────────────────────┬────────────────┤
│ Content Types                   │ 2              │
├─────────────────────────────────┼────────────────┤
│ Editor Interfaces               │ 2              │
├─────────────────────────────────┼────────────────┤
│ Locales                         │ 1              │
├─────────────────────────────────┼────────────────┤
│ Webhooks                        │ 0              │
├─────────────────────────────────┼────────────────┤
│ Entries                         │ 0              │
├─────────────────────────────────┼────────────────┤
│ Assets                          │ 0              │
└─────────────────────────────────┴────────────────┘
 ✔ Validating content-file
 ✔ Initialize client (1s)
 ✔ Checking if destination space already has any content and retrieving it (2s)
 ✔ Apply transformations to source data (1s)
 ✔ Push content to destination space
   ✔ Connecting to space (1s)
   ...
   ...
   ...

Create the content model manually

Create an Album content type

From your contentful space, go to Content model and add a new content type:

  • Give it the Name Album, the Api Identifier should be album

Once the content model is saved, add these fields (you don't have to modify the settings unless specified):

  • Name - Text field (type short text).
  • Slug - Text field. Go to the settings of this field, and under Appearance, select Slug to display it as a slug of the title field.
  • Album Cover - Media field (type one file).
  • Release Year - Number field
  • Artist Name - Text field (type short text).
  • Favorite Month Year - Date field
  • Thoughts - Text field (type long text)
  • Mood - Text field (type short text list).
  • Type - Text field (type short text list).
  • Language - Text field (type short text list).

Save the content type and continue.

Step 3. Validate your content model

After setting up the content model (either manually or by running npm run setup or yarn setup), it should look as follows.

Content model overview

Content model overview

Step 4. Populate Content

Go to the Content section in your space, then click on Add entry and select the Album content type:

  • You just need at least one album to start.
  • For album information, use a website like Last.fm.

Important: For each entry and asset, you need to click on Publish. If not, the entry will be in draft state.

Published content entry

Step 5. Set up environment variables

From your contentful space, go to Settings > API keys. There will be an example Content delivery / preview token - you can use these API keys. (You may also create a new key.)

Next, 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:

  • NUXT_CONTENTFUL_SPACE should be the Space ID field of your API Key
  • NUXT_CONTENTFUL_CONTENT_DELIVERY_ACCESS_TOKEN should be the Content Delivery API - access token field of your API key

Your .env.local file should look like this:

NUXT_CONTENTFUL_SPACE=...
NUXT_CONTENTFUL_CONTENT_DELIVERY_ACCESS_TOKEN=...

Step 6. Start the server

npm install
npm run dev

# or

yarn install
yarn dev

Your project should be up and running on http://localhost:3000!

Step 7. Deploy your project

You can deploy this app to your prefered hosting service such as Netlify or Vercel.

Important: When you import your project on Netlify or Vercel, make sure to add the Environment Variables and set them to match your .env.local file.

You might also like...
Create a pokedex web page containing pokemon listing, details and favorite pokemon page

pokedex-vue-assessment Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run

Sheiley Shop is a PWA to track personal purchases, No more paper and pencil to go to the supermarket 🏬
Sheiley Shop is a PWA to track personal purchases, No more paper and pencil to go to the supermarket 🏬

Sheiley Shop Content Description Features Get started ⭐ Frontend 😍 API entry point Frontend production Backend 😎 Database Backend production Extra D

Vuetube - a simple project to learn and practice Vue js, Vuex state management, Bootstrap 4, and Firebase

Vuetube is a simple project to learn and practice Vue js, Vuex state management, Bootstrap 4, and Firebase. In this app you can save videos in categories to find them quickly later.

A web app to track shared expenses in a group of people.
A web app to track shared expenses in a group of people.

Payshare A web app to track shared expenses in a group of people. Payshare is the equivalent of a whiteboard in the kitchen of your shared flat where

An app to track you current manga/manhua/manhwa reading list.
An app to track you current manga/manhua/manhwa reading list.

manx-read-track A simple manga/manhua/manhwa, or even book track reader for you keep track where you are in your list. Project setup npm install Comp

Grocery-organizer - Create grocery lists, Recipes, keep track of what ingredients you have/need

Vue-Fire-Tail 😎 Demo Here: Vue-Fire-Tail Try Logging with the following Email Address: [email protected] Password: [email protected] Steps Why Vue Fire Tail T

🙋🏽‍♂️ Domain-Driven Design & Nuxt - Using Nuxt Modules to structure large Nuxt Apps

🙋🏽‍♂️ Domain-Driven Design & Nuxt - Using Nuxt Modules to structure large Nuxt Apps ⚡️ Talk at NUXT NATION 2021 by Anton Reindl In this talk I will

Learn Programming! Start from zero, become a hero, and finally get a job!

Programming Challenges Website Official Code Repository Prograchallenges.com is an open source project made for the Telegram group of Programming Chal

Web application to learn and trade crypto with play money

CryptoCademy Commands Run development docker container(s): $ bash docker/developer/startup ODER $ chmod +x docker/developer/startup #Nur einmal danach

Owner
Brittany Walker
Developer Advocate
Brittany Walker
Nuxt Headless CMS is a template for personal websites and blogs. The project was made with Nuxt.js and Contentful as a headless CMS and Vuetify as a UI framework.

Nuxt Headless CMS Nuxt Headless CMS is a template for personal websites and blogs. The project was made with Nuxt.js and Contentful as a headless CMS

Wojciech Sikora 0 Jan 15, 2022
A dirty Web Audio API-based workaround for keeping computers awake

keep-me-awake A dirty web-based workaround for keeping computers awake. This works by playing an inaudible-to-hooman tone (10Hz) indefinitely in backg

Bùi Văn Thiện 5 Aug 29, 2022
ScoreBot - an app for keeping score of card games

ScoreBot is an app for keeping score of card games, darts, dominoes, dice, or any other game where you keep a basic running total of points. It is easy to use on a tablet or cell phone at the game table.

Ian Kluhsman 1 Jun 18, 2022
Reads Hub is a simple platform (built with Django, Vuejs) for users who love to share their favorite books.

Reads Hub is a simple platform (built with Django, Vuejs) for users who love to share their favorite books.

Khalid Zeiter 1 Apr 9, 2022
Search info of your favorite movies

Search info of your favorite movies

Mateo Acevedo Vargas 3 Feb 12, 2022
Rest-api-client - Easily accessible REST API client available on your favorite browser

REST API Client Website: https://l23de.github.io/rest-api-client/ Inspirations t

Lester Huang 0 Jan 1, 2022
Tech blog starter-kit with vue3, nuxt3 and Contentful

Tech blog starter-kit with vue3, nuxt3 and Contentful Vue3 - used setup script Nuxt3 TypeScript Tools: Vite, Yarn 3, Volar Styles: Primeflex, Primeico

LongRun Inc. 25 Oct 6, 2022
🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

?? Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

EGGSY 30 Sep 3, 2022
A Laravel Nova tool to manage and keep track of each one of your logs files.

A Laravel Nova tool to manage and keep track of each one of your logs files.

Artem Stepanenko 12 Sep 6, 2022
Track your customers feedback to build better products with LogChimp

LogChimp Track user feedback to build better products Docs · Contribute · Twitter · Discord ?? About LogChimp is self-hosted platform for products mak

LogChimp 345 Sep 30, 2022