http://tbhbeyond.com (My App)
https://github.com/steelvoltage/tbhbeyond (Github Repo)
Back in November, when I first started programming I told myself I wanted to be able to make a site like D&D Beyond. As a huge tabletop RPG fan, I had no idea at the time that the site was built using React. I didn't even know what React was.
Fast-forward to this week, and I finished my first major React project, which is a site inspired by D&D Beyond. It allows you to create and manage your characters for another indie tabletop RPG called The Black Hack. Sure, this homage to D&D's site is at a much smaller scale. But, I'm only one person. I imagine their site has an entire team of devs behind it, based on the robust functionality.
Still. I can say I accomplished what I set out to do! Coding the site alone took well over a month. I didn't have any guide, other than my concept. The site was built using create-react-app and taps into Firebase for a back-end database and authentication. It's hosted on Netlify and I even purchased a domain for it.
I charged headlong into building it with functional components, the Context API for state, and hooks to tap into state and side-effects. There's even a custom hook called useAuth to pull down the user authentication information in there.
It's hard to summarize the multitude of lessons that this project taught me. But, I can say my confidence with React grew exponentially. If I had to pick the most valuable thing I learned, I would say it's simple perseverance. There were times where I felt overwhelmed, lost, and wanted to quit. But, banged my fingers against the keyboard and prowled Google for hours at a time, until I sorted my issues.
In the end, I shattered through the multitude of challenges the project presented and finished strong. And, much to my surprise, after sharing it on a few tabletop RPG groups, I even got myself a few users!
Knowing that someone finds it useful and will use it alone makes it worth the effort.
To other beginners out there, if you're working on a project, don't give up. Get it done, pluck away at it whenever you can. Because, we're after this career to make cool things, and we should finish our cool things.
Top comments (5)
Luckily, Firebase makes the secure user management easy. The entire auth piece handled outside of the client, on their servers. So, I was just tapping into that API.
The biggest stumbling block I think for this project was probably displaying things conditionally based on the user being logged in or not. I ended up making my useAuth custom hook and using protected route render props for React Router.
Also, just the size of the project too. It's bigger than anything I've built before. Trying to conceptualize and plan out how I wanted it all to fit together was a new experience.
As a huge D&D and tabletop rpgs fan, you have my sincere admiration. Congrats for your project, looks great!
Nice! I was just thinking how I've been considering getting more into D&D type hobbies as an online thing. I haven't really played since college, and I'd been holding onto my love of it being an "way from screen" activity that I used to enjoy with friends, but I've come to realize I'll just never be able to commit the same way to consistent IRL games like I could when I was a kid.
Anyway, tbhbeyond looks great and it's great that you made it open source!
Thanks Ben!
You should try it online someday. It's a little strange at first, but it's way easier to commit to a couple of hours with friends online, especially if you live far away (like many of mine do.) There's tons of nice tools for it too out there.
Great read! Motivating others is a good idea, surely, many people get discouraged and give up when an answer is a simple Google search away. (: