Minor security fixes as per GitHub security scan

• Inclusion of functionality from an untrusted source
• Client-side URL redirect using query in URL

Some reworks

• readme updated
• added more gap in between the template card
• added the github link to the navbar
• changed some fonts in homepage and added some paragraph sections there

full css and ui rework:

• Changed the background image
• Made the design and animation minimalistic
• updated the navbar and footer
• removed unwanted styling in css
• removed unwanted gradient from text
• made minimal footer

Minor css fix

removed many useless css code. Made it more good.

not that the gradients are not generated by AI, instead it is generated by online CSS gradient maker.

Don’t this that this is a AI generated/AI styled project. This site doesn’t have that much huge css to use AI.

The Login with Google button is copied by some article in Medium.

The gradient used in the home page Get Started button is custom made using CSS gradient generator

The background image and the animated phone image is generated by Chatgpt. I don’t know whether this is contributing to the AI feel 🥲🥲😭😭

UPDATE::

By asking to shipwrights, they say that it was flagged and AI because it used AI generated images, which is not allowed. So i made it my self using canva, here it is:

Fix: Chrome media hub staying active even when video stops

fixed this by removing the src and loading the video again into chrome’s memory, this solves the problem .

Added demo video to the home page

Updated README.md and also fixed many minor css and html issues

Added README.md !!

*Not comleted yet, no images and videos are added yet

Added the pages such as About, privacy-policies etc…

Added About, Privacy policies , Terms of service page in hbs and added the corresponding routers for it

Added confirmation for logout and Added redirect to the last visited URL in login

• Added redirect to the last visited URL in login
• Added confirmation for logout, and made the logout route a long random string

Added ‘My invitations’ section in website

Added My invitations section that shows the invitations created by that user. From here user can see the invitation, creation date, and user can also delete the invitation.

Delete option will delete all files that are part of that invitation from the cdn, then delete the complete invitation from the db.

And also added some minor fixes such as:

• webpage title issues
• added favicon
• etc…

User experience improvement

implemented:

• made the created invitation url return fron server to frontend
• removed unwanted console.log used for debugging
• made the “Get started” button in frontend functional
• Added: invitation link and copy button in invitation creation form submission page

Added search option in templates

Implemented using Fuse.js

*images are placeholders

Reached initial working stage

• First working template added
• Added: render of hbs from cdn
• rendering of custom form from database

added template and form rendering from Database

Added a option to write the template(HBS) and the form from frontend

implemented:

• option to write the template(HBS) and the form from frontend
• hbs to CDN script
• 10 MB fields limit in template creation router (multer)
• Invitation total file size limit 50 MB (formidable)
• Invitation data processing and cleanup

Connected the form created using jquery forms to HackClub CDN

My website is basically a site that have many templates for different kind of event. A user can select a template , this will redirect to a form. Each template have entirely different forms , each form is created by the Admin using a jquery form builder ui.

Because these form structures are unknow to the server, the server dont know how much file input fields are there. so we cant set a limit on number of file input fields and per input size.

So I set a 50 MB total upload limit using formidable before sending files to hackclub cdn.

This makes the usage fair.

Handle multipart uploads with file size limits using busboy formidable ✓

In the last devlog I shared a very large code to limit max total requiest size using busboy.

Yesterday , In a simple google search , the Google AI mode suggested me of Formidable

previously idk formidable …

So I learned about that , it made my code so tiny

• frontend logic was already there

Handle multipart uploads with file size limits using busboy

i want to limit the max total file upload to 50 MB, multer cant have this feature

so I use busboy and wrote long long code to solve this problem

code :

Research: How to limit the total file size in a multipart/formData (Express.js)

After many searches I found out that multer don’t support this

I am planning to use Busboy directly

Added error messages in data submissions in rendered template form

Added a 50 MB file size limit in file upload (for now only frontend checks are implemented, backend check is TODO).

Added delete template option for admin

The delete option will delete the template from the database and also delete the thumbnail image stored in hackclub CDN

Switched from formeo to jquery form builder

formeo doesn’t support many input types

Researching on custom form builder

On deep research on making a custom form builder form my each templates , I found : formeo, jquery form builder and survayJS

connected the admin only template creation form to the firestore

AND
also made the template cards load dynamically

currently provided image is a placeholder

This is admin page , only admin page have create template button

Added hackclub cdn to the project !!!

At first it didn’t worked because of compatibly issue of new nodejs’s fetch and npm form-data module

fixed using new build-in formData()

new knoledge unlocked:

I can use :

app.use('/admin', requireAdmin, adminRouter)

instead of :

app.use(requireAdmin)
app.use('/admin', adminRouter)

I know everybody knows this, but this is a knowledge to me

added a very very cool text area for entering description for each field

completely build on bootstrap accordion

check it out !!!

First template design completed !!!

fully using Bootstrap , and some css

Continuing the writting of the first template for the site !!!

basically my project is a invitation page builder, it needs a lot of custom template.

  |
 ▽     not complete yet

Devlog 6 - Template creation form

In this 6h 44m, I made a lot of features but the main highlight was the work on the template creation form ( continuation of previous devlog)

Story Time:

Basically my project is a wedding invitation page generator. My website will have a lot of prebuild invitation template(HBS) for different different events

So the point is different templates require different forms should be filled by the user.

Therefore when the admin create different template, the admin should list the require fields for the form of the specific template.

Problems faced:

My thoughts was to make a prebuild list of fields, from that the admin should list them in specific order.

Problem - 1

The first problem was there is no form element to do these. So i used a select element with a ‘Add’ btn.

For the sorting, at first i used up/down button, but that wasn’t smooth. After researching I found sortable js.

At first sortable js also was not smooth, I fixed that by removing some bootstrap classes from the tag.

Problem - 2

The next problem I faced was I cant use required in the custom fields list maker, So I can’t make that field mandatory.

Solution (simple)

The solution was simple,
I made a invisible <textarea required .....>, and add the list of fields to that in json string when the admin edited the list.

Thank you for reading ❤️,
Mrithul.

Devlog 5 - Templates Page

Spent 4 hours and 52 minutes working on the templates page today.

This page is going to be the main place where all invitation templates are managed, so I wanted to get the basic structure done before moving on to creating more templates.

Templates Grid

The first thing I worked on was the layout. I switched the page to a responsive grid system and started building the actual templates page. I also added a Create Template card that is only visible to admins.

Clicking the card opens a modal for creating new templates.

Template Creation Modal

The modal is still incomplete, but the basic flow is now working.

Currently it has fields for:

• Template name
• HTML file name
• Preview image
• Template category
• Template fields

There’s still quite a bit of work left to do here, but at least the structure is finally in place.

Template Categories & Fields

One thing I didn’t want to do was create a completely separate form for every invitation type.

Instead, I’m building a system where templates can be configured using categories and predefined fields.

const templateCategories = [
  { id: "wedding", name: "Wedding" },
  { id: "engagement", name: "Engagement" },
  { id: "birthday", name: "Birthday" }
....
]

const templateFields = [
  {
    id: "eventTitle",
    label: "Event Title",
    type: "text",
    category: "common"
  },
  {
    id: "groomName",
    label: "Groom Name",
    type: "text",
    category: "wedding"
  }
....
]

Right now I’ve added categories for weddings, birthdays, engagements, housewarmings, baby showers and several other event types. The field system should make adding future templates a lot easier.

Small UI Improvements

I also spent some time cleaning up the page and added a footer. The site is slowly starting to look more like an actual product instead of a collection of pages.

Next

The next step is finishing the template creation page and making the field selection system fully functional.

Once that’s done, adding new templates should be much faster than it is right now.

Devlog - 4

Today I connected my website to firestore for database
I have implemented the saving of login information of user to user collection of firestore database

This is the implementation code:

service\userService.js :

async function saveUserLogin(userRecord) {
   return db
       .collection("users")
       .doc(userRecord.uid)
       .set(
           {
               displayName: userRecord.displayName || null,
               email: userRecord.email,
               photoURL: userRecord.photoURL || null,
               lastLoginAt: new Date(userRecord.metadata.lastSignInTime)
           },
           {merge: true}
       )
}

service\userService.js :

router.post("/sessionLogin", async (req,res) => {
  const idToken = req.body.idToken;
  const expiresIn = 60 * 60 * 24 * 13 * 1000;

  try {
    const sessionCookie = await admin.auth().createSessionCookie(idToken, { expiresIn: expiresIn });
    const options = {maxAge: expiresIn, httpOnly: true, secure: false};

    const decodedClaims = await admin.auth().verifySessionCookie(sessionCookie, true);
    const userRecord = await admin.auth().getUser(decodedClaims.uid);
    
    await saveUserLogin(userRecord)

    res.cookie('session', sessionCookie, options)
    res.status(200).send({status: "success"})
  } catch (err) {
    console.error(err)
    res.status(401).send('Unauthorized request!');
  }
})

I also created the redirect from login page if login successful / refresh in login fail (these things where previously missing)

Also there are many UI improvements made, that’s not written in this Devlog

(●’◡’●)

Devlog

Time spent: 8 hours 15 minutes across ~6 days

This week I mostly worked on security-related improvements and continued work on the invitation template system.

Security Fixes

When I opened GitHub, I got a security notification. After checking it, I found that a Firebase client-side API key was present in the repository.

I know Firebase client API keys are not secret credentials by themselves, but leaving them exposed can still make abuse easier, especially if other protections are missing. Since the project is still in development, I decided to clean it up now rather than later.

What I did:

• Revoked the old API key
• Generated a new one
• Moved the configuration into environment variables
• Made sure sensitive files are not pushed to GitHub

res.locals.firebaseClientCred =
  Buffer.from(process.env.firebaseClientCred, "base64")
    .toString("utf-8");

The long-term plan is to separate development and production configurations.

Right now localhost access is required for development, so strict domain restrictions are not practical yet. Once the project is deployed, I plan to have:

• A development API configuration that allows localhost
• A production API configuration that only allows requests from the final website domain

The developer configuration will stay out of production deployments. Even if development code is accidentally pushed, it should fail instead of exposing access that was never intended for production.

The backend Firebase SDK setup was already safe, so most of this work was focused on the client-side configuration.

Navbar Improvements

I also implemented automatic navbar link highlighting.

Instead of manually setting the active page for every route, the navbar now checks the current URL and highlights the correct link automatically.

function highlightCurrentPageLink() {
  const currentPageUrl = window.location.pathname;

  const links = document.querySelectorAll("#navbar-ul li a");

  links.forEach((link) => {
    const href = link.getAttribute("href");

    if (href.split("/")[1] === currentPageUrl.split("/")[1]) {
      link.classList.add("active");
    } else {
      link.classList.remove("active");
    }
  });
}

Small change, but it makes maintaining the navigation much easier.

User Menu

Worked on the user menu and logout functionality.

Nothing huge here, but it is another piece of the authentication flow that is now coming together.

Template System

I created the HBS file structure for the template page and spent a lot of time thinking about how templates should actually be implemented.

This is currently the biggest blocker. There are several ways to handle template rendering and customization, and I don’t want to lock myself into a design that becomes difficult to maintain later.

A lot of the development time this week went into planning, experimenting, and changing approaches rather than writing large amounts of code.

Next

• Create separate Firebase development and production configurations
• Add domain restrictions after deployment
• Continue work on the invitation template system
• Finish the template rendering workflow
• Improve user account features

There is still a lot to do, but the project is becoming more stable and secure before moving further into feature development.

Devlog-2:

Today , I added a beautiful animation to the home page
made the home page overall beautiful

Also fixed a authentication error :

• the fix was simple - I accidently wrote (res, req) instead of (req, res) in express router
• Also completed the login page design

What’s next :

• Surely build a footer tomorrow 😁
• Also planning to create a template creation tool for Admin

Note: the PHONE image have a cool animation effect.

completely done by hands , no AI

only used AI for clearing doubt

Login Page

within 8h 33m , I made the home page, firebase auth, designed logo etc..

currently I am working on designing the ‘Login with google’ page

• I thought I should only submit and link the project after completing the full project … 😟
  but I didn’t forget to connect hackatime 😁🥳