A festive e-card generator built with JavaScript and Firebase!
+
Watch Demo
ยท
Hosted Link
@@ -34,6 +35,7 @@
-This is a web application developed for the Codedex Holiday Hackathon '23! The chosen track was the theme "In the Holiday Spirit".
-Main app features:
+This is a web application developed in less than 24 hours for the Codedex Holiday Hackathon '23! The chosen track was "In the Holiday Spirit".
+Main app features include:
* Authentication with Google Firebase
-* Personalized greeting message
+* Personalized user experience with greetings and saved cards
* Data persistence with Firestore. Create, read, and delete documents
* Create an e-card from 3 preset templates
-* Makes a unique URL for every card so users can easily share them with family and friends
+* A unique URL for every created card, so users can easily share them with family and friends
-I wanted to make something with a bright and cheerful interface to get people excited for the holiday season. The concept for this app allowed a lot of creativity for both the frontend UI as well as the ecard design.
+I wanted to make something with a bright and cheerful interface to get people excited for the holiday season. The concept for this app allowed a lot of creativity for both the frontend UI as well as the e-card design.
@@ -80,7 +82,7 @@ These instructions are for running the project locally.
### Prerequisites
-You'll need to the latest LTS version of Node installed.
+You'll need to have the latest LTS version of Node installed.
### Installation
@@ -98,7 +100,6 @@ You'll need to the latest LTS version of Node installed.
Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
-_For more examples, please refer to the [Documentation](https://example.com)_
@@ -107,53 +108,34 @@ _For more examples, please refer to the [Documentation](https://example.com)_
## Roadmap
-- [x] Add Changelog
-- [x] Add back to top links
-- [ ] Add Additional Templates w/ Examples
-- [ ] Add "components" document to easily copy & paste sections of the readme
-- [ ] Multi-language Support
- - [ ] Chinese
- - [ ] Spanish
-
-See the [open issues](https://github.com/othneildrew/Best-README-Template/issues) for a full list of proposed features (and known issues).
+- [x] Add authentication
+- [x] Connect to Firestore
+- [x] Template HTML Pages
+- [x] Creating, reading, deleting data functionality
+ - [ ] Updating previously made cards
+- [x] Styling of all HTML Pages
+ - [ ] Animations on e-cards
+- [x] Host project with Firebase
+
+## Challenges
+I had to trim a few features from the application due to the short timeframe I had to make this. I ran into significant difficulty implementing the authentication and CRUD operations with Firebase. I have not worked with it in over a couple of years, and there have been significant changes to the syntax with limited helpful examples online.
-
-## Contributing
-
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
-
-If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
-Don't forget to give the project a star! Thanks again!
-
-1. Fork the Project
-2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the Branch (`git push origin feature/AmazingFeature`)
-5. Open a Pull Request
-
-
-
-
-
-
-## License
-
-Distributed under the MIT License. See `LICENSE.txt` for more information.
+I also had several issues creating my build files with NPM. I am not very familiar with Vite as a build tool. I was unable to host on Vercel and Netlify, and eventually had to host on Firebase.
-
-
## Contact
-Your Name - [@your_twitter](https://twitter.com/your_username) - email@example.com
+Leanne Holmes - lvholmes@ualberta.ca
+
+Project Demonstration: [https://www.youtube.com](https://www.youtube.com)
-Project Link: [https://github.com/your_username/repo_name](https://github.com/your_username/repo_name)
+Hosted Link: [https://cardcrafter-d6673.web.app](https://cardcrafter-d6673.web.app)
@@ -162,49 +144,12 @@ Project Link: [https://github.com/your_username/repo_name](https://github.com/yo
## Acknowledgments
-Use this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!
-
-* [Choose an Open Source License](https://choosealicense.com)
-* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)
-* [Malven's Flexbox Cheatsheet](https://flexbox.malven.co/)
-* [Malven's Grid Cheatsheet](https://grid.malven.co/)
-* [Img Shields](https://shields.io)
-* [GitHub Pages](https://pages.github.com)
-* [Font Awesome](https://fontawesome.com)
-* [React Icons](https://react-icons.github.io/react-icons/search)
+* [Tabler Icons](https://tabler.io/icons)
+* [iStockPhoto](https://istockphoto.co/)
-
-[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge
-[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge
-[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
-[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge
-[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
-[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge
-[issues-url]: https://github.com/othneildrew/Best-README-Template/issues
-[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
-[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
-[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
-[linkedin-url]: https://linkedin.com/in/othneildrew
[product-screenshot]: https://i.ibb.co/wNgQskw/thumbnail-2.jpg
-[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
-[Next-url]: https://nextjs.org/
-[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
-[React-url]: https://reactjs.org/
-[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
-[Vue-url]: https://vuejs.org/
-[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
-[Angular-url]: https://angular.io/
-[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
-[Svelte-url]: https://svelte.dev/
-[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
-[Laravel-url]: https://laravel.com
-[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
-[Bootstrap-url]: https://getbootstrap.com
-[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
-[JQuery-url]: https://jquery.com