iiitl/wollete

Next.js project facilitating secure, anonymous digital receipt transmission for paperless transactions and billing among diverse entities.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

wollete's Issues

Add route to Login button

The current navbar lacks a route to the login page, which is crucial for user authentication and access to the platform's features. Additionally, in mobile view, there is no login button available in the sidebar. This issue aims to address these concerns by adding a link to the login page in both the navbar and sidebar for mobile users.

Task to be Done:

• Add a login page route to the navbar.
• Add a login button into the sidebar for mobile view.
• Ensure that the link directs users to the already created login page.
• The sidebar is specifically visible in the mobile view of the application.

Additional Information:

• The login page has already been created and integrated into the application at route /login.
• The navbar is a key navigation component visible across all pages of the application.
• The implementation should be tested across different screen sizes to ensure responsiveness.

Create Custom 404 Page

Currently, when users navigate to a non-existent route on the website for e.g. http://localhost:3000/xyz, they encounter a default black page, which does not align with the overall theme and aesthetic of the website. This issue aims to enhance the user experience by creating a custom 404 page that seamlessly integrates with the website's theme, providing users with a more cohesive and visually appealing error page when they encounter non-existent routes.

Task to be Done:

• Design and create a custom 404 page that matches the theme and design elements of the website.
• Ensure that the custom 404 page provides a clear indication to users that the requested page could not be found.
• Integrate the custom 404 page into the website's routing system so that it appears when users navigate to non-existent routes.
• Share the screeshot of your designed page in your pull request.

Update Navbar to Include Existing Pages and Remove Unused Dropdown Options

The current navbar of the website suffers from several usability issues, including missing links to existing pages, erroneous dropdown options, and inconsistent behavior with dropdown menus. This issue aims to address these concerns by analyzing the project's pages directory, updating the README.md to list all existing pages, adding missing pages to the navbar with appropriate links, removing dropdown options for non-existent pages, and improving the behavior of dropdown menus to ensure smoother navigation experience.

Task to be Done:

• Analyze the pages directory to identify all existing pages excluding login/signup related ones.
• List the names of these pages in the README.md under the section heading "Pages" in a well-formatted manner.
• Update the navbar to include links to pages that are not already present in the navbar dropdown menus but exist in the project's directory. Classify these pages logically into the appropriate dropdown menus.
• Remove dropdown options for pages that do not exist in the project.
• Enhance the behavior of dropdown menus so that they disappear when clicking outside them, providing a more intuitive navigation experience.

Enhance Language Dropdown in Navbar and Implement Internationalization

Currently, the language dropdown in the navbar has limited options and behaves undesirably when associated with the login button. This issue aims to enhance the language dropdown by adding two additional options and resolving the unintended association with the login button's hover effect. Furthermore, the project lacks internationalization support, which is essential for catering to users in different regions. Therefore, this issue also involves implementing internationalization in the project by translating the homepage title into two languages and updating the website's route structure accordingly.

Task to be Done:

• Expand the language dropdown in the navbar to include two more language options.
• Ensure that hovering over the login button does not affect the style or behavior of the language dropdown.
• Implement internationalization support in the project.
• Translate the homepage title into two additional languages.
• Update the website's route structure to include language codes in the URL (e.g., /en/ for English, /ja/for Japanese).

Bounty: Reward will be given to one who will implement Internationalisation

NOTE : Only Assignees should work on this

Backend Server Set Up

Create two servers within the backend folder, one using Node.js ( in a file named server1.js ) and the other using Express.js ( in a file named server2.js ). These servers should listen on ports 5000 and 5001 respectively. Additionally, implement an environment file for managing variables like port numbers and other potential future additions.

Tasks:

• Set up a simple Node.js server to listen on port 5000.
• Configure an Express server to listen on port 5001.
• Implement an environment file for managing variables such as port numbers and potential future additions.

Bonus Task:
In the README.md file, add a section with appropriate heading to the question below.

1. Is it advisable to have multiple servers in the backend of a project? Why or why not?
2. Does the decision to use multiple servers depend on the project requirements?
3. If yes, what factors should influence the decision to use multiple servers, and what actions should be taken accordingly?

Design responsive Footer

Develop the footer component as per the design provided in the /componentsFigma prototype, ensuring accurate replication of all elements and styling.

Target file: /components/Footer.js

Tasks:

• Review the footer design in the Figma prototype.
• Identify all components, including text, icons, and styling specifications.
• Create HTML and CSS code to reproduce the footer design accurately.
• Ensure responsiveness for various screen sizes and devices.
• Validate the implementation against the Figma design to guarantee visual consistency.

Design: Figma Link

Note:-
Either you can rewrite the whole component or edit i the given template, it's totally up to you.

Improve Sidenav in Mobile view

Analyze the existing mobile side navigation and propose enhancements to enhance user-friendliness.

Tasks:

• Conduct a thorough review of the current mobile side navigation.
• Identify areas for improvement to enhance user experience.
• Propose actionable recommendations for making the side navigation more intuitive and user-friendly.
• Implement the agreed-upon enhancements once assigned.

Implement Dynamic News Content Management and Search Functionality for news

The /news page currently lacks dynamic content management and enhanced tab functionality. This issue aims to improve the management of news content by creating a separate content folder within the project directory and populating it with a news.js file containing news items categorized into different categories. Additionally, the issue involves integrating the news content from the news.js file into the /news page, mapping the content category-wise, and implementing a search functionality based on news titles. Furthermore, the tab functionality on the /news page needs enhancement to display news from all categories when the first tab is clicked, while the remaining tabs should display news from their respective categories.

Task to be Done:

• Create a content folder within the project directory.
• Within the content folder, create a file named news.js and populate it with news items categorized into at least three categories in JSON format.
• Import the news.js file into the code of the /news page.
• Map the news content category-wise on the /news page.
• Implement a search functionality based on news titles on the /news page.
• Enhance tab functionality so that clicking on the first tab displays news from all categories and keep first tab title as "All Categories", while clicking on the remaining tabs displays news from their respective categories.

Fix CSS Bugs on First Render of /benefits Page

Upon the first render of the /benefits page, there are CSS bugs present that affect the visual layout and styling of elements. While these bugs seem to resolve upon page reload, it is essential for the page to render perfectly on the initial load itself. This issue aims to address these CSS bugs to ensure a seamless and consistent user experience from the moment users access the /benefits page.

Task to be Done:

• Analyze the CSS bugs observed on the first render of the /benefits page as depicted in the below provided screenshots.
• Identify the root causes of these CSS bugs and their impact on the visual layout and styling.
• Implement necessary CSS fixes to ensure that the page renders correctly on the first load without any visual discrepancies.
• Test the changes thoroughly across different browsers and devices to verify that the CSS bugs have been effectively resolved.
• Document the fixes applied and any relevant insights gained during the debugging process for future reference.

Alignment Issue:-

On Hover Buttons:-

Create Forgot-Password Page ( UI Only )

Create a Forgot Password page that maintains the theme and design consistency of existing form pages. Additionally, integrate this page with the "Forgot Password" button on the Login page.

Tasks:

• Design the Forgot Password page to align with the theme of the website and match the style of other form pages.
• Implement HTML structure and CSS styling for the Forgot Password form, ensuring consistency with existing design elements.
• Integrate the Forgot Password page with the login interface by linking it to the "Forgot Password" button.