Next.js + Tailwind CSS + GraphQl Event listing Website
Preview
Clone this repo :
git clone https://github.com/AOMuiz/next-event
Navigate to the root folder and install all dependencies :
yarn
ornpm install
Start Development Mode :
yarn start
ornpm start
- Open http://localhost:3000 to view it in the browser.
- Happy Hacking!
A brief description of the project
Task
Build a Event Listing Website Using PeddleSoft Graphql API
List all events.
Each event with an Event Details Page
Technologies Used
-
Used
Next Js
for building the website. -
Implemented website styling using
Tailwind CSS
. -
Used
Error Boundary
npm package for handling errors. -
Used
Graphql & Apollo GraphQl
for data fecthing. -
Created
Custom Hooks
for handling fetched data and rendering.
Preview
Preview the example live on StackBlitz:
Deploy your own
Deploy the example using Vercel:
How to use
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app
Deploy it to the cloud with Vercel (Documentation).