proyecto26 / concertx-frontend Goto Github PK

As a Developer,
I want to use TailwindUI to create the layout of the pages and the styles of the components

As a user, I want to see a modal for connecting my wallet to the website. Show a signature request before accepting Terms and Conditions.
Example:

• Signature request message:

Message:
Welcome to ConcertX!

Click to sign in and accept the ConcertX Terms of Service and Privacy Policy.

This request will not trigger a blockchain transaction or cost any gas fees.

Your authentication status will reset after 24 hours.

Wallet address:
0x...

Nonce:
UUID

Internet Computer Protocol is another Blockchain network that allows to build dApps without JWT tokens, so let's add support to use Internet Identity to allow users use different auth providers! 🙏

As a user, I want to be able to visit the home page of the site and easily access important information about the site and its features.

Definition of Done:

• A home page has been designed and implemented
• The home page provides a clear overview of the site and its features
• The home page includes links to important pages on the site
• The home page adheres to the site's branding guidelines
• The new home page is optimized for search engines and meets accessibility standards

Tasks:

• Design and implement the home page using TailwindCSS from a new route.
• Ensure the home page provides a clear overview of the site and its features.
• Add links to important pages on the site to the home page.
• Ensure the new design is visually appealing and modern
• Optimize the performance of the new home page, ensuring it loads quickly and efficiently

As a user, I want to see a clear indication when I try to access a page that doesn't exist on the site. This helps me understand that I have reached a dead end and need to navigate elsewhere.

Definition of Done:

• A 404 page has been designed and implemented
• The 404 page is displayed when a non-existent page is accessed
• The 404 page includes helpful information for the user, such as a search bar or links to other pages on the site
• The 404 page adheres to the site's branding guidelines

Tasks:

• Design and Implement the 404 page using TailwindCSS from a new route.
• Test the 404 page to ensure it is displayed correctly when a non-existent page is accessed
• Test the 404 page to ensure it includes helpful information for the user
• Test the 404 page to ensure it adheres to the site's branding guidelines

As a user, I want to be able to view the details of a specific event. This page should provide comprehensive information about the event, including date, time, location, ticketing information, and any additional details or promotional materials.

Definition of Done

• A new Event Details Page has been created in the website, with a unique URL and navigation option
• The page includes all necessary information about the event, including date, time, location, ticketing information, and any additional details or promotional materials
• The page is responsive and displays correctly on all supported devices and screen sizes
• The page has been tested and verified to be free of any errors or issues

Tasks

• Create new Event Details Page template and associated CSS styles
• Add dynamic data retrieval for event information
• Populate the Event Details Page with relevant information, including date, time, location, ticketing information, and any additional details or promotional materials
• Ensure the Event Details Page is responsive and displays correctly on all supported devices and screen sizes
• Test the Event Details Page for errors or issues and resolve any problems found

As a user, I want to have a footer section at the bottom of the page that contains important links and information about the website. This will improve the overall user experience by providing easy access to key pages and resources on the website.

Definition of Done

• The footer section has been designed and developed to match the overall look and feel of the website
• The footer includes links to important pages such as About Us, Contact Us, and Terms of Service
• The footer includes social media icons and links to the website's social media profiles
• The footer includes copyright information and any necessary legal disclaimers or disclosures
• The footer is responsive and mobile-friendly, and looks good on all devices
• The footer adheres to any existing design or branding guidelines for the website

Tasks

• Design and develop the footer section to match the overall look and feel of the website
• Add links to important pages such as About Us, Contact Us, and Terms of Service
• Add social media icons and links to the website's social media profiles
• Add copyright information and any necessary legal disclaimers or disclosures
• Ensure the footer is responsive and mobile-friendly, and looks good on all devices
• Ensure the footer adheres to any existing design or branding guidelines for the website

As a Developer,
I want to use RemixJS to create the webapp for ConcertX using Tailwind and PostCSS while supporting SSR.

As a user, I want to be able to switch to a dark theme on the website, so that I can view the content comfortably in low light conditions. I want the website to provide support for the dark theme by adjusting the color scheme and style of the website.

Definition of Done:

• The website provides support for the dark theme by adjusting the color scheme and style of the website using TailwindCSS
• The user can switch between light and dark themes using a toggle button on the website
• The dark theme adheres to the site's branding and style guidelines
• The dark theme does not affect the functionality or performance of the website
• The code changes are well-documented and easy to maintain

Tasks:

• Identify the color scheme and style of the website using TailwindCSS
• Create a new color scheme and style for the dark theme using TailwindCSS
• Implement the new color scheme and style for the dark theme using TailwindCSS
• Provide a toggle button for the user to switch between light and dark themes
• Test the website to ensure the dark theme does not affect its functionality or performance
• Ensure the dark theme adheres to the site's branding and style guidelines