Webkriti Project

ZestX: Futuristic Fest Website

Hosted Link : http://zestx.netlify.app/

ZestX Frontend Repository: https://github.com/ZestX-IIIT/ZestX

Figma UI: https://www.figma.com/file/gBKMpXErqC2KjZRX4Ycy3Q/ZestX?node-id=0%3A1

Overview

ZestX for the webkirti : We have made for a month-long fest website with various events. Our website has two modes: visitors and admin.

Visitors can register for the various events taking place. For that, they first require to register. A verification mail will be sent to the user. Once verified, the user can explore the website and the events going on. The visitor’s dashboard would contain their details and the list of events they are registered in, and the past event they participated in before. The user can change his details as well. For that, he needs to provide the password. Users can even change their email address and a new verification mail would e sent to the new mail address. The user also has access to change the password. Finally, a log-out button for the user.

Next comes the admin mode. Admin log-in credentials are directly linked to the database. Admin would log in and would be redirected to the admin page where admin can manage the users. All the events would be displayed on the admin page, including the user registered for the same. Admin can add more external users to a particular event and can remove anyone from any event. In short, it has direct access to the database.

How does it work?

We will be attaching screenshots for phone, tablet and desktop in a single poster

When you open our website, a remarkable landing page would is displayed, giving you the option for the sign in and sign up:

Then comes the sign-in, sign-up page.

The next page would be loaded based on your credentials. As mentioned above, we have two modes, visitor mode and the admin mode:

Visitors Login

If the visitor logins, a respective home page would be opened. The home page contains all the details for our fest.









After that, we have the event details page having all the information for each event and a button to register.











Then we have a user dashboard containing your information and the events you are associated with in fest.











We, too, have to edit information and change password pages for the user.

Admin Login:

Admin would have a single user management page containing information for all the events and a list of all the users registered in that event, whether added by admin or registered through the website.

We, too, have a custom error page. If mistakenly you went to a page not suppose to visit, there you will find an error page with an option to go at the sign-in page

Features

Backend Features

1. Our website is more focused on security, and for that, we will be sending a verification mail to the visitor. Visitors can register only when the verification gets completed.
2. Later, if the user tries to change the mail, a verification mail would be sent to the visitor’s new mail address.
3. Similarly, we send a mail if a visitor forgets the password. There too, we send a link for the new webpage where users can change their passwords.
4. Passwords too have constraints, which is, it’s mandatory to add one lowercase letter, one uppercase letter, one digit, one unique character with a minimum length of six characters.
5. Redirection is also an essential factor in our website. If a visitor tries to open the main admin page, he would be automatically redirected to the homepage. Similar redirection is on the sign-in page, where the web page is opened according to the login credentials. Other necessary redirections too are added.
6. We haven’t used any passwords in our code. We tried to keep our security intact.

Front-End Features

1. Our pages are fully responsive for all the devices to add the functionality of opening our website on any device.
2. We have done DOM manipulation and tried to open all the pages of the homepage without refreshing the page.
3. Visitors can go through all the events, get all the information about the event by clicking the posters, and register.
4. We also have a custom error page to enhance the UI
5. Users can change their personal information, including the password.
6. Admin can add/remove any user from any event, and admin credentials are directly linked to the database.
7. We have added some incredible animations and UI enhancing features to our website, like a scrollable progress bar.

Tech Stack Used

Client Side :

HTML

CSS

Javascript

Node-Modules

• Parcel-Bundler
• Express

External Libraries:

• Lottie
• AOS

Server Side :

Node

• bcrypt
• cors
• dotenv
• heroku
• jsonwebtoken
• nodemailer
• nodemon
• path
• pg

PostgreSQL

How to Set-Up?

1. Clone the Repository
2. Open your Editior , preferably VS code
3. Open Index.html with Live Server and you can access all the functionality of our Website

Visitors Credentials :

Email : [email protected]
Password : 2W5wYY3JZ1LE8V16@

Developers

• Akash Gupta
• Harshil Mendpara
• Raj Varsani