Over the past few weeks, I've been working on Share Wins, a web app that allows you to see "wins" and celebrations shared by the community, and share your own win so that others can celebrate with you.
Why?
Why did I decide to create this app? I've been struggling a lot lately, and one of the things I've been advised to do to help is keep track of my "wins" and accomplishments. My original thought was to make a platform that allowed users to save their wins so that they could look back at them on a rainy day, but then I remembered how excited I get when I see others share their successes on twitter, and realized that it would be an even better idea to create a place to celebrate with others. Some days it's hard to find the "wins" in our own lives, but seeing others do well can lift us out of that funk and make us feel so much better (and maybe even help us find the wins in our lives).
Why keep your wins to yourself when you can share wins?
How?
The front end of the app is pretty simple. I used Create React App to spin up a super basic app, then used Material-UI to save myself some styling work. I did still have to do some manual styling, which was done using a combination of Material-UI's "useStyles" and some CSS.
Wins are stored in a Firebase Realtime Database, which allows me to store my data as JSON (so I don't have to deal with SQL) and stores my data in the cloud, so that it can be accessed from anywhere without needing to download a particular database software.
Once I had the front end and the database set up, my MVP was done - or so I thought. I pushed my code to GitHub ... and got a warning from GitHub because my Firebase API key was exposed. After a quick google search, I realized that is considered acceptable practice for a Firebase Realtime Database ... as long as you use some other security measures.
So I decided that this was the time to add authentication to my app. I knew that I didn't want to deal with having my own user database, and Firebase makes it easy to use authentication through other apps, so I decided on having my users sign in through twitter. I was deciding between using Twitter and using Google, but I realized that since I got the idea to share wins from seeing wins shared on Twitter, Twitter was the best authentication platform for my app.
Setting up Twitter authentication was not as easy as I had hoped. On the Firebase side, it was just a matter of pushing a few buttons and adding a few lines of code. But to create an app that could connect to Twitter, I needed a Twitter API key, and to get one of those, you need a developer account. There were a lot of questions to answer and a lot of forms to fill out. They also needed a website address, so I had to deploy the app (I deployed to Firebase just to be consistent). Eventually I got my Twitter API key and was able to connect the app and allow sign-ins via twitter.
The way the app is currently set up, anyone can see wins, but only authenticated twitter users can share wins. Currently all wins are shared anonymously, but I plan to change that.
Tech Summary
- JavaScript
- React
- Material-UI
- CSS
- Firebase Realtime Database
- OAuth/Twitter
Share Your Wins!
Currently, the app is deployed on Firebase, and the only way to access it is by that direct link - https://sharewins-7144c.firebaseapp.com/.
I'm considering getting a domain name for it, but not sure yet if I want to. If I do get a domain name, I'll stick with firebase hosting, so this link will always work ... but there may eventually be a shorter link.
What's Next
What I have now is just the MVP - I'm definitely planning on adding a few more features.
First step is allowing users to have their name associated with their post. I definitely want to keep the anonymous option (and that will probably be the default), but since people are signing in with twitter, I have that information, and if people want to be congratulated on their win on twitter (because they deserve it!), I want to give them that option. This will require a slight tweak to how I send the wins to the database, but the good news is that it'll allow me to clean up the mess I made last time I tweaked how I send things to the database.
After that I'll probably spend some time on styles, since this MVP is extremely boring looking.
Be A Part of It!
I'm definitely looking for people to participate in the process.
Here's the GitHub repo: https://github.com/SarahLKatz/share-wins
If you look at the README, there are some ideas for how to contribute, but I'm also welcoming ideas from the community. If you have an idea for what you think should be included, reach out to me and/or write up the code and put in a pull request!
Top comments (0)