Ignite 6.0 website - A website for the 6th iteration of the annual Techfest of NMIMS Navi Mumbai

Video Demo

CS50.2023.Final.Project.by.Atharva.Patil.mp4

This is a front end only project which acts a medium for students or participants to register for their desired events in the techfest. With the theme of this year's techfest being OTT, I decided to give it a primary theme of Netflix. Here, I created a UI similar to Netflix with the navbar becoming opaque on scrolling plus the events being displayed as a carousel slider. Each event would then lead to a google form so for our participants to proceed to the registration. Next theme is Amazon Prime where I took the time to introduce our team members and some highlights from our last iteration of the techfest. Lastly to promote our sponsors, I created a Disney plus Hotstar like theme. The website was deployed and hosted on Microsoft Azure where I also utilized its private DNS service to set a custom domain. The address of the website (Now Disabled) is https://nm-ignite.co.in/. My website aided in receiving 366 event registrations

• TechStack
• Features
• Files
• Run Locally

TechStack

• Flask: The website is created on a flask web application.

• Bootstrap 5.3.1: Front end framework used for creating the OTT-like UI

• Azure App Service: To deploy the flask application to azure app service

• Azure CICD: To setup automated deployment from github actions itself. On commiting to the github branch, changes are automatically reflected on the deployed website.

• Google Forms: To create Registration Forms for each event.

Features

• Interfaces: Separate interfaces for different OTT themes (Adds to the look and feel of the website). Primary UI for netflix with the navbar feature appearing on scrolling. This feature is done using JavaScript using the "ready" function and "scroll" object and also by controlling CSS in JavaScript.
• Event Registration: Comprehensive and simple event registration with the help of netflix-like event cards.
• Comprehensive look: The overall UI design with the theme provides a comprehensive introduction to the techfest and its essence.

Files

Important Files of the directory

• templates: Folder contains the main html template that defines the entire webpage and all sections
• static: Contains all the important media related to the techfest along with landing and responsive CSS. Landing CSS defines the appearance of the website in desktop or any other wide screen mode whereas the responsive CSS attributes are applied when the screen resolution changes to mobile phones.
• app.py: The flask application used to host the website.
• requirements.txt: Contains the dependancies required to run the website on production environment smoothly.
• venv: To simulate a production environment.
• github/workflows: Contains deployment jobs that are set up in Azure CICD.

Run Locally

Clone the project

  git clone https://github.com/Progpr/ignite5

Go to the project directory

  cd ignite5

Install dependencies

  pip install -r requirements.txt

Start the server

  flask run