Welcome to the official repository for The Literary Circle Website! If you are a new inductee of the WebD Domain, WELCOME TO THE TECH TEAM! This document is written specifically for you to help you get started from scratch.
Even if you have never coded before or used Git, follow this guide step-by-step, and you will be up and running in no time.
These files are critical for the project to run. Modifying them directly can break the entire website.
| File/Folder | What it does | Risk if changed | How to safely change |
|---|---|---|---|
package-lock.json |
Locks exact versions of installations. | HIGH: The app might crash or behave differently for everyone. | Never edit manually. Run npm install to update it. |
node_modules/ |
Contains thousands of downloaded code packages. | HIGH: Your app will stop working instantly. | Never edit manually. Delete usage with npm uninstall <package>. |
dist/ |
The final built website for production. | LOW: Your changes will just be overwritten next build. | Do not edit. This is auto-generated. |
.git/ |
Stores version history. | EXTREME: You could lose all project history. | Never touch this hidden folder. |
.github/ |
Controls Automated Deployment. | HIGH: You could break the website update process. | Only Tech Heads should modify the workflows here. |
Follow these steps exactly. If you get stuck, ask a senior!
- Operating System: Works on Windows, Mac, or Linux. No special setup needed!
- Install VS Code: This is the editor we use. Download here.
- Install Node.js: This runs our Javascript code. Download the "LTS" version. Download here.
- Install Git: This tracks our code changes. Download here. During installation on Windows, choose "Git Bash" if asked.
Open your terminal (or command prompt) and type these commands (replace with your info):
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com""Cloning" means downloading the project to your computer.
- Open VS Code.
- Open the Terminal (
Ctrl + ~orCmd + ~). - Navigate to where you want the folder (e.g., Desktop):
cd Desktop - Run the clone command (get the URL from the GitHub "Code" button):
git clone https://github.com/your-org/lc-website.git
- Go into the folder:
cd lc-website
⚠️ This step is mandatory.
The website will NOT run and will show a blank screen if Firebase is not configured.
- Go to the Firebase Console:
https://console.firebase.google.com - Sign in using your Google account
- Click Add project
- Enter a project name (e.g.
lc-website) - Disable Gemini and Google Analytics (optional)
- Click Create project
- Inside the project dashboard, click Add app followed by </> Web
- Give the app a nickname (e.g.
lc-website-web) - ❌ Do NOT enable Firebase Hosting
- Click Register app
- Firebase will show a configuration object like this:
const firebaseConfig = {
apiKey: "AIzaSyB-exampleKey123456",
authDomain: "lc-website.firebaseapp.com",
projectId: "lc-website",
storageBucket: "lc-website.appspot.com",
messagingSenderId: "123456789012",
appId: "1:123456789012:web:abc123def456",
measurementId: "G-ABCDEF1234"
};The required environment variables are already defined in .env.example in the root directory.
- Copy the example environment file:
cp .env.example .env
Open the .env file and replace the placeholder values with the Firebase configuration shown in the Firebase Console.
This downloads all the external code libraries we use (like React, Tailwind).
npm installWait for it to finish. You might see a new node_modules folder appear.
This starts a "local server" so you can see the website on your computer.
npm run devYou will see a link like http://localhost:5173. Ctrl+Click (or Cmd+Click) it to open the site in your browser.
Here is the stack our website is built upen. You need to get familiar with it first.
- React: A library for building user interfaces.
- TypeScript: JavaScript with "types" (prevents bugs).
- Tailwind CSS: A utility-first CSS framework for styling.
- Vite: The build tool (makes our site run fast).
Phase 1: The Basics
-
HTML/CSS: Structure and Style.
-
JavaScript: The logic.
-
NOTE: Just these crash courses are enough. No need to watch those 8 hour long CSS Tutorials! Watch these videos, code along and move on!
Phase 2: The Core Tech
-
React: Building components.
- React Course for Beginners
- Mini Project: Build a simple "To-Do List" app.
-
Tailwind CSS: Styling the modern way.
- Tailwind CSS Crash Course
- Mini Project: Recreate a simple landing page (like Google's homepage).
-
NOTE: For building the mini-projects, use the Tech Stack mentioned! This is a must!
Phase 3: Level Up
-
TypeScript: Safer JavaScript.
-
NOTE: This is enough. Now you are good enough to add your first feature.
Our application connects several services to deliver a secure and fast experience:
- Users access the site via
lcnitd.co.in. - GoDaddy resolves the domain to Cloudflare's servers.
- Cloudflare acts as a shield, providing DDoS protection and CDN caching before requests reach our host.
- GitHub Pages hosts our static React frontend bundle.
- React App runs in the user's browser, handling the UI and logic.
- Firebase provides backend services:
- App Check verifies that requests come from our legitimate app.
- Firestore stores user data and authentication state.
Understanding where files live is 90% of the work.
/
├── public/ # Static files (images, logos)
│ ├── images/ # Team photos, backgrounds
│ └── logo16.png # Website favicon
├── src/ # source code - YOU WORK HERE 99% OF THE TIME
│ ├── components/ # Reusable UI parts
│ │ ├── layout/ # Header, Footer
│ │ └── sections/ # Big page sections (Hero, About, Team)
│ ├── data/ # Data files (easy to edit!)
│ │ ├── siteConfig.ts # Links, contact info, text
│ │ └── teamMembers.ts # ✨ ADD NEW MEMBERS HERE ✨
│ ├── types/ # TS definitions (types)
│ ├── App.tsx # Main Page assembly
│ ├── main.tsx # Entry point (connects React to HTML)
│ └── index.css # Global styles & Tailwind config
├── index.html # Main HTML file
└── package.json # Project settings
- Adding a Team Member? → Go to
src/data/teamMembers.ts. Just copy an existing block and change the details. - Changing Contact Info? → Go to
src/data/siteConfig.ts. - Editing the Navbar? →
src/components/layout/Header.tsx. - Changing Styles? → Most styles are inside the components themselves using Tailwind classes (e.g.,
className="text-red-500").
Rules to live by:
- NEVER push directly to
master. Themasterbranch is production. If you break it, the site breaks. - Always create a new branch for your work.
- Test locally before saving.
1. Get the latest code Before starting, make sure you have the latest code from everyone else.
git checkout main
git pull origin main2. Create a new branch
Name it descriptively (e.g., add-new-member, fix-navbar-bug).
git checkout -b add-naivedyam-bio3. Make your changes Edit the files in VS Code. Save them.
4. Commit your changes "Staging" and "Committing" saves a snapshot of your work.
git add .
git commit -m "Added Naivedyam's bio and photo"Note: Write a clear message. "Fixed stuff" is a bad message.
5. Push to GitHub Send your branch to the cloud.
git push origin add-naivedyam-bio6. Make a Pull Request (PR)
- Go to the GitHub repository page.
- You will see a "Compare & pull request" button. Click it.
- Write a description of what you did.
- Ask a senior to review it.
- Once approved, merge it!
The website uses Firebase Authentication with Google Sign-In for NIT Durgapur students.
flowchart TD
A[User visits site] --> B{Logged in?}
B -->|No| C[Show Login Button]
B -->|Yes| D[Show UserID in header]
C --> E[Login Modal]
E --> F[UserID + Password Login]
E --> G[Sign up with Institute Email]
G --> H[Google Sign-In popup]
H --> I{Email ends with nitdgp.ac.in?}
I -->|No| J[Error: Use institute email]
I -->|Yes| K{User exists in DB?}
K -->|Yes| L[Log them in]
K -->|No| M[Create new user]
L --> N{Password set?}
M --> N
N -->|No| O[Prompt to set password]
N -->|Yes| P[Dashboard]
D --> Q[Click UserID]
Q --> R[Profile Modal]
R --> S[Edit: Department, Password, Roll No, Reg No]
- Only
@nitdgp.ac.inemails are allowed (btech, mtech, etc.) - UserID is extracted from email (e.g.,
nm.22u10885@btech.nitdgp.ac.in→22U10885) - First-time users are prompted to set a password
- Users can login with UserID + Password after setting it
Our website uses Cloudflare for security and performance. Think of it as a security guard + speed booster sitting between visitors and our site.
| Feature | What It Does |
|---|---|
| DDoS Protection | DDoS (Distributed Denial of Service) attacks try to crash websites by flooding them with millions of fake requests. Cloudflare automatically detects these attacks and blocks the malicious traffic before it reaches our server. This runs 24/7 with no action needed from us. |
| Global CDN | CDN stands for Content Delivery Network. Cloudflare copies our website to 300+ servers across the world. When someone visits from India, they get the site from Mumbai/Chennai servers. Someone from the US gets it from American servers. This means faster loading times for everyone, no matter where they are. |
| SSL/TLS Encryption | This is the padlock you see in your browser's address bar. All data between visitors and our site is encrypted, so hackers can't intercept passwords, form submissions, or any other data. We use TLS 1.3, the newest and most secure version. |
| Web Application Firewall | The firewall analyzes every request to our site. It blocks known hackers, malicious bots, SQL injection attempts, and other common attacks. It uses a database of known threats that Cloudflare updates continuously. |
| Feature | What It Does |
|---|---|
| Bot Fight Mode | Many bots crawl the internet trying to scrape content, spam forms, or find vulnerabilities. Bot Fight Mode identifies and blocks these automated visitors while allowing legitimate bots like Google Search to continue crawling. |
| AI Labyrinth | This is a clever trap for AI scrapers. Cloudflare adds invisible honeypot links to our pages. Real visitors never see them, but AI bots that ignore our robots.txt rules follow these links and get trapped in an endless maze of AI-generated fake content. They waste their resources while our real content stays protected. |
| Browser Integrity Check | Some attackers use headless browsers or modified browsers to attack sites. This feature checks if the visitor's browser is legitimate by analyzing HTTP headers. Suspicious browsers are challenged or blocked. |
| Auto Minify | Our JavaScript, CSS, and HTML files contain spaces, comments, and formatting for readability. Auto Minify removes all unnecessary characters, making files smaller and faster to download. This happens automatically on every page load. |
| Brotli Compression | Before sending files to visitors, Cloudflare compresses them using Brotli (better than the older gzip). A 100KB file might become 25KB. Smaller files = faster page loads, especially on slow mobile connections. |
| Early Hints (103) | Normally, browsers wait for the full HTML before downloading CSS/JS. Early Hints sends a "103" response telling browsers which files to start downloading immediately, before the HTML even arrives. This shaves off precious milliseconds from load time. |
| Speed Brain | When a visitor hovers over a link or is likely to click something, Speed Brain prefetches the next page in the background. By the time they click, the page is already partially loaded to make navigation feel instant. |
| 0-RTT Connection | When a returning visitor connects, normally there's a TLS handshake (back-and-forth to establish encryption). 0-RTT allows their first request to be sent before the handshake finishes, making repeat visits faster. |
| HTTP/3 (QUIC) | The newest internet protocol. It's faster than HTTP/2, especially on unstable mobile connections. If a visitor's browser supports it (Chrome, Firefox, Edge do), they automatically get the faster connection. |
| Always Online | If GitHub Pages (our hosting) ever goes down, Cloudflare will serve a cached version of our site instead of showing an error. Visitors might see slightly old content, but the site stays up. |
If the website is extremely slow or showing errors and you suspect an attack:
Step 1: Enable "I'm Under Attack Mode"
- Login to Cloudflare Dashboard
- Select
lcnitd.co.in - Go to Security → Settings
- Toggle "I'm Under Attack Mode" ON
Warning: This shows a 5-second JavaScript challenge to ALL visitors. Only enable during actual attacks!
Step 2: Monitor
- Check Security → Analytics to see blocked threats
- Wait for attack traffic to subside
Step 3: Disable When Safe
- Once traffic normalizes, turn OFF "Under Attack Mode"
- Normal visitors won't see the challenge anymore
Contact: Tech Heads have Cloudflare dashboard access.
Maintained by The Literary Circle