Skip to content

Latest commit

 

History

History
234 lines (152 loc) · 7.27 KB

README.md

File metadata and controls

234 lines (152 loc) · 7.27 KB
Raw

Webkriti Project

ZestX: Futuristic Fest Website

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


Netlify Status License MIT COntributors


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

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:


Landing Page Image


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


Sign-in page Image



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.

    Home Page Image



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



    Event Details Page Image



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



    User Profile Page Image



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



    Edit Information Page Image



    Change password Page Image



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.

    Admin Page Image



    Add user Image



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


Error page Image


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. We also have a custom error page to enhance the UI
  4. Visitors can go through all the events, get all the information about the event by clicking the posters, and register.
  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
  • NPM-Packages
    • Parcel-Bundler
    • Express
  • External Libraries:

    • Server Side :

  • Node
    • bcrypt
    • cors
    • dotenv
    • jsonwebtoken
    • nodemailer
    • nodemon
    • path
    • pg
  • heroku
  • 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