Next.js website to list DJ and other musical events

Last update: Jul 30, 2022

DJ Events (Frontend)

Next.js website for DJ Events. This is part of my Next.js course on Udemy

DJ Events

VIEW DEMO

Usage

Setup Backend

The Strapi backend can be found here

Clone the repo above and run your backend

Maps

Create a .env.local file and add your Mapbox and Google API keys

NEXT_PUBLIC_MAPBOX_API_TOKEN = "xxxxx"
NEXT_PUBLIC_GOOGLE_MAP_API_KEY = "xxxxx"

Run the Server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

GitHub

https://github.com/bradtraversy/dj-events-frontend
You might also like...

A working example of a decoupled implementation using Next.js and GraphQL with the eZ Platform CMS

Decoupled CMS example with GraphQL and Next.js This repository contains the source code for the sample application from the talk "Easy decoupled siteb

Aug 22, 2021

Uber Web Clone using Next.js, React.js, TailwindCSS, Firebase and Mapbox

uber-next-clone Uber Clone using Next.js, React.js, TailwindCSS, Firebase and Mapbox This is a Next.js project bootstrapped with create-next-app. Gett

Mar 26, 2022

Auth with Next.js - Authentication, Permissions and Payload Rules with Nextjs using ReactJ with Typescript

Auth with Next.js - Authentication, Permissions and Payload Rules with Nextjs using ReactJ with Typescript

Auth with Next.js 💬 About Authentication, Permissions and Payload Rules with Ne

Jun 3, 2022

Online Shopping for Men - An online shopping application built using Next.js and Firebase.

Online Shopping for Men - An online shopping application built using Next.js and Firebase.

Tiptop Description An online shopping application built using Next.js and Firebase. Preview Live Demo See it live here. Features Authentication Wishli

Jul 19, 2022

Personal portfolio blog hosted here built with Next.js, Tailwind CSS and hosted with Vercel

Personal portfolio blog hosted here built with Next.js, Tailwind CSS and hosted with Vercel

Personal Blog - Mere Musings This is my personal portfolio blog hosted here built with Next.js, Tailwind CSS and hosted with Vercel. The original temp

Aug 2, 2022

[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness

Relate Relate brings together mindfulness communities, teachers and individuals. Read the article on Medium Made with ❤︎ by Sébastien Dubois Deprecati

May 19, 2022

100 lines of code Hackernews reader (with the help of next.js).

About This is an isomorphic react app, displaying stories from hackernews made with super nice next.js. It's just about 100 lines of code. Nothing ser

May 31, 2022

A sample Next.js app for showing off it's capabilities

A sample Next.js app for showing off it's capabilities

NextGram Sample next app that takes advantage of the routing capabilities. In particular, notice that the photo route can be attached to two distinct

Apr 10, 2022

Rauchg Blog - Blog built by a Next.js core maintainer.

blog This is the blog that powers rauchg.com, built on next.js and deployed to the cloud via Vercel. How to run First, install Vercel CLI. Development

Jul 30, 2022
Comments
  • 1. Improvement: Date formatting without momenet.js

    The date can be formatted easily without moment.js Now alternative's to moment.js are recommended by its author

    Moment.js Authors: We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done.

    Reviewed by Malik-Idrees at 2021-09-27 11:25
  • 2. Fixed: Event is still created if hasEmptyFields is true

    Without a return statement at line 33, if any or all of the fields are empty and the add event form is submitted, the event is still created after the toast is displayed and disappears. Adding the return statement will stop the execution of the handleSubmit function at the line 33 - toast.error('Please fill in all fields') Hence it will prevent the event from being created.

    Reviewed by clarnx at 2021-06-10 20:41
  • 3. Protect the /account/dashboard and /events/add routes

    Attempting to access the protected routes without authorization, by manually entering the related URLs in the browser's address bar, breaks the app for the /account/dashboard route and allows the display of the Add Event page.

    With the following changes we conditionally redirect from inside the AuthContext wrapper when the checkUserLoggedIn() method fails to retrieve a user.

    The changes in the protected pages pertain to avoiding breaking errors and flashing rendered content which occur before the useEffect in the AuthContext fires.

    Reviewed by stefaleon at 2021-05-31 11:28
Meditate - A meditating website to clear your mind. Built with Next.JS and TailwindCSS

A modern meditation web app for you to meditate on your own terms. Track your progress and share your thoughts with others.

Jul 27, 2022
💻 LiveTerm - Highly customizable, easy-to-use, and minimal terminal styled website template, powered by Next.js.
 💻 LiveTerm - Highly customizable, easy-to-use, and minimal terminal styled website template, powered by Next.js.

?? LiveTerm - Highly customizable, easy-to-use, and minimal terminal styled website template, powered by Next.js.

Aug 3, 2022
Advice API is a full stack fully responsive website made with Next Js for both front-end and for back-end
Advice API is a full stack fully responsive website made with Next Js for both front-end and for back-end

Advice API Website! Advice API is a full stack fully responsive website made with Next Js for both front-end and for back-end. Table of contents Overv

Jul 20, 2022
Blogspace - A complete website developed with Next SSR, Typescript, Prismic CMS
Blogspace - A complete website developed with Next SSR, Typescript, Prismic CMS

Título: Spacetraveling Descrição: Um website completo desenvolvido com Next SSR,

Jul 3, 2022
Next.js ReCaptcha V3 - Straightforward solution for using ReCaptcha in your Next.js application

⭐ Next.js ReCaptcha V3 Straightforward solution for using ReCaptcha in your Next.js application. ??️ Tiny and Tree-Shakable ?? Written in TypeScript ?

Jun 18, 2022
A full stack e-commerce website for learning purposes and built with Typescript, Nextjs, Redux-toolkit, semantic-ui-react

A full stack e-commerce website for learning purposes and built with Typescript, Nextjs, Redux-toolkit, semantic-ui-react

Nov 4, 2021
Text manipulation - Text manipulation website with NextJS, Typescript and Tailwind CSS
Text manipulation - Text manipulation website with NextJS, Typescript and Tailwind CSS

Text manipulation - Text manipulation website with NextJS, Typescript and Tailwind CSS

Apr 27, 2022
A twitter clone website that was built using nextjs
A twitter clone website that was built using nextjs

Twitter-Clone this is a twitter clone website that was built using nextjs, then decorated using tailwindcss and to store the data using the firebase r

Jun 23, 2022
200 lines realtime todos app powered by next.js, preact, jet, redux and now
200 lines realtime todos app powered by next.js, preact, jet, redux and now

next-todos About 200 lines isomorphic todos app powered by next.js, redux and Jet realtime. The todos are synced between browsers. The canonical TodoA

Apr 24, 2022
📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.
📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

Dashboard Create your own team dashboard with custom widgets. Table of Contents Installation Server Development Production Docker Create a Dashboard A

Aug 2, 2022