Inspiration 💡
We were inspired by a community local scrapbooking event where people wrote letters and can decorate by adding stickers to it and we decided to recreate something similar but with a personalized photo attached to it! We loved how the event brought the community together where they can write letters to whoever they want and make it feel as wholesome as possible as many people around the world might not have the desire to simply go on gmail to attach a photo and write your email, but our website makes it fun and cute!
What it does 📌
Our website essentially allows users to create letters through either typing it, or using the web speech API to recognize your voice and build it for you! There is also an AI assistant box to give you tips on what to write. Also, there is a webcam feature where you can simply attach a photo of yourself by taking a picture and also add a image description and it will convert it to a polaroid format. After creating your letter, you can choose a date to send to your loved one. With user signup/login, they can also check the letters they sent and who they sent it to and when they are going to be sent!
How we built it 🖥️
For this project, we utilized vite with react, typescript, and tailwindcss. From there, we created a frontend and backend folder using node.js and firebase to capture user authentication and tracks if the letter is being sent. For the front end, we had multiple folders on features and components such as the navbar and pop-up boxes! We used figma for the logos and coolor for the color palettes. For the letter creating we utilized various 3rd party APIs such as webcamjs/media api and web speech api and google gemini with python for generating tips on how to write your letter.
Challenges we ran into ⚠️
The first challenge we ran into was the merging process, since we had different branches we still had to edit the main file of the landing page somehow. For instance, when we tried implementing the navigation bar to the front page it gave a lot of merge conflicts. Since this is our first time using react, typescript, and tailwind, we had to learn the documentation for them and it was difficult without copilot. On the non technical side, we took almost 2 days figuring out on what color scheme we should go for in regards to the theme. Other than that and the merge conflicts, we all managed to figure out the git functionality and made pull requests to fix them.
Accomplishments that we're proud of 🏅
We are incredibly proud of the web design. Reese, our UI/UX designer used figma, moodboards, and coolors to find the perfect color scheme for our website and created an amazing logo for us. We are super proud of getting the speech api and the webcam webhook to work as they required intensive documentation reading. Even though the backend didn't really have much issues, we are still proud we can use something we never used before like firebase and email your letters to the right person!
What we learned 🧑🏫
We learned a little bit of everything, since this is our first times using these languages, we learned how to work together, communicate, resolve merge conflicts, and have fun! Learning the documentation for react was tough, but with the SASE workshop on intro to react it became much easier and we all understood how the components worked and was able to use it to its max potential.
What's next for Letter2You 🔮
- Prompt google gemini for more personalized tips for your letter
- Format the emails better and nicer
- Add full functionality to the dashboard where it can track every letter with the optional photo on top and the letter below it
Log in or sign up for Devpost to join the conversation.