Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@leanneholmes
leanneholmes committed Dec 13, 2023
1 parent e0a4532 commit 7bfa843
Showing 1 changed file with 26 additions and 81 deletions.
107 changes: 26 additions & 81 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<p align="center">
A festive e-card generator built with JavaScript and Firebase!
<br />
<br />
<a href="https://github.com/othneildrew/Best-README-Template">Watch Demo</a>
·
<a href="https://cardcrafter-d6673.web.app">Hosted Link</a>
Expand All @@ -34,6 +35,7 @@
</ul>
</li>
<li><a href="#usage">Usage</a></li>
<li><a href="#usage">Roadmap</a></li>
<li><a href="#usage">Challenges</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#acknowledgments">Acknowledgments</a></li>
Expand All @@ -47,15 +49,15 @@

[![Product Name Screen Shot][product-screenshot]](https://cardcrafter-d6673.web.app) <img src="https://i.ibb.co/18Nj1yB/thumbnail.jpg" alt="Preview"> <img src="https://i.ibb.co/dGnXmC7/thumbnail-3.jpg" alt="Preview">

This is a web application developed for the <b>Codedex Holiday Hackathon '23!</b> 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 <b>Codedex Holiday Hackathon '23!</b> 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.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

Expand All @@ -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

Expand All @@ -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)_

<p align="right">(<a href="#readme-top">back to top</a>)</p>

Expand All @@ -107,53 +108,34 @@ _For more examples, please refer to the [Documentation](https://example.com)_
<!-- ROADMAP -->
## 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

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- CONTACT -->
## 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 -->
## 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

<p align="right">(<a href="#readme-top">back to top</a>)</p>



<!-- LICENSE -->
## 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.

<p align="right">(<a href="#readme-top">back to top</a>)</p>



<!-- CONTACT -->
## Contact

Your Name - [@your_twitter](https://twitter.com/your_username) - [email protected]
Leanne Holmes - [email protected]

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)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

Expand All @@ -162,49 +144,12 @@ Project Link: [https://github.com/your_username/repo_name](https://github.com/yo
<!-- ACKNOWLEDGMENTS -->
## 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/)

<p align="right">(<a href="#readme-top">back to top</a>)</p>



<!-- MARKDOWN LINKS & IMAGES -->
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
[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

0 comments on commit 7bfa843

Please sign in to comment.