Legacy Lock is a Virtual Time Capsule app that allows users to create and store messages or media (photos, videos, text) that are to be unlocked at a future date.
Authentication ensures that only authorized people can access the content, providing a secure and personal experience for users to preserve memories or send time-locked messages.
- Express – Web server framework
npm install express
- Mongoose – MongoDB Object Data Modeling
npm install mongoose
- Nodemon
npm install
- dotenv – Manages environment variables securely
npm install dotenv
- React Router – Enables navigation in React
npm install react-router-dom
- React for UI.
- Node.js with Express for API.
- MongoDB for data storage.
- React Router for navigation.
- Zustand for global state management.
npm install zustand
useState– Built-in React hook for state management.useEffect– Built-in React hook for handling side effects.useMemo– Built-in React hook that stores the filtered and sorted capsule list to avoid recalculations on every render.- It filters out only future capsules (openAt > now), and sorts capsules in ascending order (soonest first).
useCapsuleStatus– Custom hook to calculate the time left on locked capsules.useConfetti– Custom hook for handling the confetti effect.useValidation– Custom hook to validate form fields inCreateCapsuleform.
useNavigate– Comes from react-router-dom (for navigation)useStore– Comes from zustand (global state management)useRef- For file uploading using Cloud storage.useWindowSize– Comes from react-use. It dynamically gets the window width and height, ensuring that Confetti fills the entire screen.Read more aboutnpm install react-use
useWindowSize
date-fnsfor date formatting and calculations.Read more aboutnpm install date-fns
date-fns
multerfor handling file uploads (media files like photos and videos).Read more aboutnpm install multer
multer
-
framer-motionfor animations, like the shake effect used in WarningPopup.npm install framer-motion
-
react-confettiis a confetti effect that is triggered when the latest locket opens.npm install react-confetti
Cloudinary is used for Media handling.