Puneet Gopinath

Updated changelog with dependency upgrades.
Enhanced message sanitization by normalizing line endings and trimming whitespace.
Move toLocalISOString function outside the React component.
Add recipient name validation in capsule creation & username validation in registration on client side.

Updated README to not mention that we can export as PDF.
Time to ship!

Sanitize the message provided in capsule creation.
Replace multiple whitespaces with single whitespace in name sanitization.
Added he library for escaping HTML for capsule message (escape while sending it, not before storing it in DB)

Fixed the issue of icons not being displayed in jpg and png exports. Removed PDF export because I can't fix it in PDF export.

Fixed bug caused when unlock date is set, occurs because each time unlock date is set, timezone offset was removed, but the date was already in local time.
Updated changelog (also added the chores i.e. the dependency upgrades by dependabot to changelog)
Also added sanitization for recipient name and email in capsule creation.

A critical function was missing: To sanitize user inputs!
Sanitize user inputs (username, email, password) on backend.
I had to also revoke and create new gpg keys...

Up Next:
Sanitize inputs for capsule creation on backend, add validation on frontend...

Disable submit button in forms when user clicks on it for better UX.
Fixed a small bug that creeped in recently to display email field (resend confirmation) to users who aren't logged in.
Pass setLoggedIn function to Header component for proper logout functionality.
Renamed state variable error2 to mediaError for better readability.
Styled loading text and added fade pulse animation to it (icon is from font awesome using react-icons npm package - added reference in about page, credits section)

Enhanced authentication flow by padding loggedIn state from App.jsx.
Switch back to use navigate method by react router instead of refreshing page for page redirects (as now loggedIn is governed by states).
Update verification form to conditionally display email field instead of using css hide.
Optimized view route by using .lean() on mongoose document to get plain object.
Added error handling and display errors in view capsules page with retry button.
Some other minor improvements.

Added create capsule button in view capsules page.
Redirect user after creating capsule to capsule view page.
Switch home page button on creating capsule to view capsule (Go to Dashboard).
Changed savedTheme to be a function instead of constant value for better sync

Created new Loading.jsx & CapsuleView.jsx.
User can now see all his created capsules in /dashboard/view
Renamed unlock route to view, and send capsules created by that user through that route (doesn't send message, media).
Lock view route to only logged in users.
Move CapsuleForm.jsx inside dashboard folder.
Fixed minor bugs.
Added script tag and loaded theme data from localStorage in index.html to avoid flash of other themed content.
Updated theme handling to set class name to html instead of body

Refactored the unlock capsule email too (Changed from a <div> to <table>).
Tested by sending the email to my gmail account.

Refactored the confirmation email template completely.
Changed from a <div> based layout to a <table> structure for appropriate rendering across clients.
Added a outer wrapper table and an inner wrapper table.
Reserved blank placeholder for the Chrono Capsule logo.
Tested using WPOven.

Added walls for the mouse.
Added 1 screw so far (only sketch). Will do remaining later...

Enabled trust proxy for proxies that are set in env variables.
Added verification check to prevent unverified users from creating capsules [BACKEND only].
Standardized error messages that are responses to the frontend.
Fixed a logical error in capsule controller that checks if unlock date is at least 50 minutes later.
Displayed the error message received from server in the capsule creation form.
Updated changelog & merged this pull request #14

Added walls for PCB support.
Added battery holder.
Really insane. Tough to understand and learn

Completed switch and sensor walls.
Imported and fastened PCB, switch, sensor and wheel.

Onshape seems tough to grasp (this is my first cad too), but I'm steadily understanding it.

Completed the sensor and switch holes.
Now working on sensor and switch walls.

Today I discovered this program was running.
This is my first time at this electrical engg. tools online.

Almost completed the base of the mouse.

Updated version in footer and package.json to v1.1.0-dev.
Added index to verification token to speed up lookups during verification.
Fixed: ensured sendConfirmation is awaited to catch email sending errors.
Merged pull request #7!!

Used react router's useNavigate function instead of window.location.href = "/";
Added aria-live attributes for better accessibility.
Added abort signal to verification request for better cleanup on unmount.
Added express-rate-limit to limit resend confirmation to only 5 requests per IP per hour.
Updated changelog

Added live countdown message for re-send verification cooldown
Enhance styles in verify page
Fixed bug, reset error to null after verification email is sent so that the notice is displayed.
Update console log messages at backend for sending confirmation email.

Added resend confirmation functionality as a button on the verify page with email as input.
Fixed a bug, variable name mismatch b/w ejs template and provided variable while rendering.
Added a feature that the email input field only displays if user isn't logged in. If they are, it automatically takes the token set in the localStorage and sends it to server as an Authorization header.
Added cooldown of 30 seconds to click the resend verification button again(although I haven't yet added a live countdown of 30 seconds yet)

Released v1.0.1:
Introduced new environment variable SMTP_SENDER to define the visible from address in an email.
SMTP Sender mismatch: Resolved email delivery failure due to a different SMTP Sender rather than the SMTP User.

Now emails work! Previously, as I had no domain, I couldn't send emails.

Added new EJS templates for email confirmation: confirm.ejs & confirm.txt.ejs
Renamed email.ejs & email.txt.ejs to capsule.ejs & capsule.txt.ejs
Implemented to mail the confirmation link to the user, and also added website link in each email.

A good news: I've got a domain at namecheap today: puneetg.me, and I've set up a subdomain for chrono-capsule: https://capsule.puneetg.me/
THIS IS MY FIRST DOMAIN

Added Verify page on frontend (React) to verify email of newly registered users.
Added a loading spinner
Also validation to the token on frontend and backend, on backend to avoid fetching from database, imagine the token is not even valid, then why mess with database?

Added user verification functionality.
Added fields (verified, verification.token, verification.expiresAt) to user schema
Tested verification using postman (attached)

Next: Send emails containing link with token for verifying email

Released v1.0.0
Updated changelog

What's up next?
- Add email verification (to check if the entered email is actually the user's own email)
- Add a dashboard.
- Integrate to calender
- Email confirmation to Sender (mentioning that the capsule has been unlocked)

Time to ship the project!!

Added Home page (attached), added universal header and footer
Added export prop in Card component (only show export options if export is true, to enable it to be used as a preview in the home page)
Refactored complete index.css and gen.css
Check it out for yourself

Downloaded all svgs to all importing them as React components.
Added option to upload profile image - max 1MB (stores it in base64 encoded format in localStorage)
Used html2canvas and html2pdf.js to export them.
Enhanced styles.

What about the bug? The fact that icons went missing in pdf/jpg/png. I couldn't fix that. But html is 100% looking same as it looks on the website. Might try working on pdf/jpg/png later.

Building export as pdf, png, jpeg and html. Also, nevermind the styling of the page, I'll update it later.
I don't know why icons aren't showing up in the exports (neither of the 4)
Tried locally saving svgs (all bottom icons are svg)
Tried importing them as react component (vite-plugin-svgr)
Tried css fill: #fff
Even tried hardcoding fill into the svg file

None worked.

Released v1.0.0-beta

Bugs fixed

Import home.css in Home react component, otherwise it doesn't show up in production build
Fix bug in RegExp of route handling for production built files
Added a missing await keyword before ejs.renderFile to return string instead of a Promise
Change navigation method to window.location.href after login, this helps update the links in the header of the site.
Improve debug logging
UX enhancement: changed capsule unlock scheduler from every hour to every 10 minutes
Fix raw text EJS template: replace \n (ejs renders it as text) with actual new lines

Added more inputs to generator form for social media links and email.
Also updated Card.jsx to fetch data from localStorage

Created card generation form in Gen.jsx, and moved card to Card.jsx
Also added tagline in the card (just after title)
Wrote basic CSS styles for form.
Stored user data into localStorage.

Converting into a business card generator.
Changes Made:
1. Reduced size of card
2. Added props to Header component

Shipped the project.
I'm crazy, I edited the changelog and commited but forgot to push to github before tagging a new release of v1.0.0-alpha
Also, I didn't only test sending of emails before releasing that version, seems exactly it failed. I forgot an await in the ejs template rendered.
Also implemented static files into express from the build folder of vite. I also forgot importing home.css file in home component, which took me time to understand as I'm new to react (I was like - importing a css file into javascript?)
The attached image shows the author section in about page

Successful completion of v1.0.0-alpha.

Added Home Page, placeholder for terms in Terms page and similarly in Privacy page
Removed action and method fields in html form that prevented full control to onSubmit function
Whenever an error due to invalid data provided by the user, scroll to top.
Removed bug due to difference in seconds
Added create capsule & logout button in the header
Removed other minor bugs and updated README, CHANGELOG

Added EJS templates for the email html and text content.
Added a div element for displaying errors instead of showing errors using alert function.

I wanted to show the about page, so I'm writing this devlog after just few minor changes

Added Register.jsx to allow users to register their account
Prevent access to /create when not logged in (NotLoggedIn.jsx)
Hide login and register forms when already logged in (LoggedIn.jsx)
Added about page to display details about project and author (text written by Copilot)

Update file headers to include copyright, filename and license information

Guys, A small note, I'm still learning React, so if you think I've consumed more time than expected in frontend, keep this in mind.

• Built Login page, also included password toggle feature
• Switched to sending form data as json, as backend doesn't support form data
• Fixed bugs arising due to adding timezone offset in a local date itself
• Added 1 Hour chip to directly set unlock date as an hour later.
• Created a function to format local time in ISO[toLocalISOString()] after realizing that toISOString gives UTC time.
• Fixed a tiny logic bug

• Implemented unlock date validation, on the frontend, we validate that it's at least 1 hour in the future. But on the backend, we validate if it's 50 minutes in future at the time of submission of the form.
• Replaced file uploads with dynamic media link inputs (will support file uploads in future)
• Fixed issue of calender icon not showing up on dark mode (input type=datetime-local) by using color-scheme property of css
• Theme preferance is now stored in localStorage
• Marked all fields required except media links and encryption.
• Form submit bug squashed.

Introduced dark theme, used CSS variable-based color system
Made dark theme set by default
Simple toggle using ☀ and ☾ unicode icons

What's next:
- Unlock date validation
- Persist theme color in localStorage

• Added checkbox to choose to encrypt the contents or not. Used flexbox alignment to center the text and checkbox
• Added optional mobile tweaks using @media (max-width: 480px) to set flex-direction to column
• Tried custom checkbox, but didn't work. Might add later.

What's next:
- Dark theme
- Unlock Date validation (must be at least 1 hour from now)

Added a header component, used react router's Link component to direct users to other webpages of chrono capsule website, added a fade-out style to the Reset button (fades out in 0.2s)

FRONTEND:
Added unlock date suggestions (1 week, 1 month, 6 months, 1 year), clicking on them calculates the future date and populates the input.
Added smooth styling, a reset selection button (or a chip) when a suggestion is selected
Used 999px as border radius to create smooth pill shaped buttons
Add a footer to the website (Header is still pending 🤣)

BACKEND:
Limited username to a min of 3 & max of 30 characters, password to a min of 8 & max of 128
Limited user & recipient email to 254 characters (max length as per RFC 5321😁)

Added CapsuleForm.jsx as the interface for creating time capsules
Integrated useState method from React module to display message character count
Implemented live character count with a 5000-character limit
Styled the form with modern light theme (dark theme coming soon)
Resolved vite import path issue for index.jsx by setting root in vite.config.js

Added vite as npm dev dependency, setup files for frontend (index.html, index.css, index.jsx, App.jsx)
Sketched roadmap for v0.2.0-alpha, beta and final release

Added health route at /health to verify status of the server, wrote Changelog
Message character limit capped at 5000
Released the first versioned build of chrono-capsule: v0.1.0
Hurray!!!
Go check it out for yourself: https://github.com/PuneetGopinath/chrono-capsule/releases/tag/v0.1.0

Used WPOven to test emails, attached sample email received after a capsule has been unlocked.

Added decryption for both message and media files before sending email
Personalized email content with recipient name and upgraded the HTML template
Fixed bug of not saving media files to database
Tested capsule creation with media files (attached - done using postman) and tested sending of email (using WPOven)

Logged a major milestone: full cycle from capsule creation => unlock => delivery now works end-to-end!

Collected recipient name for personalised greetings, switched media to an array of media files instead of a single media file, added node-cron to auto-unlock capsules on schedule, added nodemailer to send emails after capsules unlock, updated user schema to validate email before storage.

At the end of the day, learnt a lot of new stuff

Tested capsules/create route using postman, added functionality to check if email is already used before user registration.

Added debug logging, tested auth routes using postman

Updated svg icons to white coloured icons, added styles to make it look sleek and modern.

Added user authentication, capsule management routes, encryption support of content present inside capsule using crypto module of nodejs (for password storage of a particular user, we're using bcryptjs)

Added connection to MongoDB database, express for handling backend of the website, models for storage of capsules and utilities.

Added README.md and made a mental map of all features to design.

Completed digital business card, just little bit of CSS is to be tweaked to make it look awesome.

Complete the ReactFacts static page website by adding fonts and styles using css and Google Fonts. Started off to work on Digital Business Card.

Started to learn react, once I complete the first section, I will make a digital business card, for now I made a very simple static webpage as I started to learn React.js from Scrimba.