diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..e06dfc2 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +NEXT_PUBLIC_RPC_URL= +NEXT_PUBLIC_CONTRACT_ADDRESS= \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index 3722418..c9fcf13 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,7 @@ { - "extends": ["next/core-web-vitals", "next/typescript"] + "extends": ["next/core-web-vitals", "next/typescript"], + "rules": { + "@next/next/no-img-element": "off", + "@typescript-eslint/no-explicit-any": "off" + } } diff --git a/.gitignore b/.gitignore index fd3dbb5..f9fcfb5 100644 --- a/.gitignore +++ b/.gitignore @@ -26,7 +26,8 @@ yarn-debug.log* yarn-error.log* # local env files -.env*.local +.env +.local # vercel .vercel @@ -34,3 +35,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts +artifacts +typechain-types +cache \ No newline at end of file diff --git a/README.md b/README.md index e215bc4..7a04e02 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,22 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# TicketChain -## Getting Started +## Problem -First, run the development server: +Many popular ticket sites exist, that allow customers to browse different upcoming events in their area and book tickets, however we identified several issues with these centralised service model: -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` +- Tickets cannot be easily transferred + - Many existing platforms make it difficult if not impossible to transfer tickets between different users. This means people don't have _true_ ownership over their purchased tickets. +- Complex user interfaces + - User interfaces on many of these websites can be quite complex and complicated, which can make it hard to book the right ticket and can often lead to customers making costly mistakes. +- Scalability issues + - When popular events are released, many of these websites can slow down or sometimes even crash, worsening the experience for the end user. +- Single point of failure + - These central services consolidate all of the data and compute for their services in one spot. One possible risk to consider is a cyberattack - if the central organisation is compromised, all customer data is at risk of being stolen and leaked. Another possible risk is the central server going down, meaning ticket services would go down, which is not ideal if thousands of attendees are trying to verify themselves at an event. -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +## Proposal -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +We propose to build a solution which tackles these issues head-on. TicketChain is a decentralised website which allows users to browse upcoming events, and book tickets for these events through verifiable, immutable blockchain transactions. This allows users to purchase tickets. Functionality also exists for users to transfer their tickets to other users. -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +This is made possible through the use of smart contracts deployed on the blockchain which expose several public read and write methods, which can be invoked through our front-end user interface. A record of transactions are kept secure on the blockchain, and no central entity can tamper with these transactions. -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +Because the main application logic is on the blockchain, this means we can exploit the blockchains' scalability and durability during high levels of demand. The workload of execution is split between nodes and transaction gas fees pay for the compute required during levels of high demand for the service, solving the issue of central services being unscalable and avoiding us from having a single point of failure. diff --git a/app/contact/page.tsx b/app/contact/page.tsx new file mode 100644 index 0000000..b998cdb --- /dev/null +++ b/app/contact/page.tsx @@ -0,0 +1,19 @@ +'use client'; +import React from 'react'; +import Header from '../../components/custom/header'; +import Footer from '../../components/custom/footer'; + +const ContactPage: React.FC = () => { + return ( +
+
+
+ {/* implement contact page here */} +

Page to be implemented

+
+
+ ); +}; + +export default ContactPage; diff --git a/app/events/[...eventId]/page.tsx b/app/events/[...eventId]/page.tsx new file mode 100644 index 0000000..60ad8d6 --- /dev/null +++ b/app/events/[...eventId]/page.tsx @@ -0,0 +1,49 @@ +'use client'; +import React from 'react'; +import { useSearchParams } from 'next/navigation'; +import Header from '../../../components/custom/header'; +import Footer from '../../../components/custom/footer'; +import EventDescription from '../../../components/custom/EventDescription'; + +// Dummy function to simulate a GET request +const fetchEventDetails = (eventID: number) => { + alert(`Fetching details for event ID: ${eventID}`); + // Simulated JSON response for the event + return { + EventID: eventID, + name: 'Example Event Name', + date: '2023-12-01', + location: 'Example Location', + ticketPrice: 100, + description: 'Detailed description of the event.', + capacity: 300, + ticketsSold: 150, + imageUrl: [ + 'https://via.placeholder.com/150', + 'https://via.placeholder.com/150', + ], + host: 'Example Host', + tickets: [1, 2, 3, 4], + }; +}; + +const ListingPage: React.FC = () => { + const searchParams = useSearchParams(); + const eventID = searchParams.get('eventID'); + + // Simulate fetching data from backend + if (eventID) { + const eventDetails = fetchEventDetails(Number(eventID)); + console.log('Event Details:', eventDetails); + } + + return ( + <> +
+ +