Just wanted to show off my first little project using redwood.
https://teamstream.gg/
It is a tournament viewer for the game apex legends. This project was super fun and super fast to build thanks to redwood. This was the perfect project for me to dip my feet into redwood and learn a bunch of new things. The speed and efficiency have made this a joy to work with and cant wait to contribute more.
This is awesome, thanks for sharing it! If you have some extra time I’d love to hear about any challenges you had with Redwood or what you think we could make even easier, in addition to any 3rd party libraries you brought in, and how they worked for you. Great stuff!
@KrisCoulson this is amazing! Thank you for posting. And +1 to Tom’s questions above.
Additionally:
I will take the easy ones first
I’m curious how/if you’re using Subscriptions for the chat
Luckily for me, I didn’t have to do too much on this front. Surprisingly Twitch will let you embed both a video player and the stream chat as long as you have an app id. Although I am looking into doing a little more with the twitch API in the future in regards to using webhooks to check stream on/off status and a few other things.
Third-party plugins
Honestly not too many. Notable things maybe.
Things that I think can make it easier
Only a few issues that I ran into that were sticky.
I think one of the first ones that I hit was in the router. Which I have already commented on here. For the side nav on this particular project, I would have loved to have been able to update the routing based on what team was selected. I ended up just storing the selected team in react state and passing it down as props to get around the layout re-rendering. It would be nice to use routing to make Netlify page analytics easier out of the box. As well as things like active links without having to reimplement it.
One thing that would be nice to have, might be along the lines of a more opinionated admin section. When scaffolding for multiple admin pages. Redwood generates multiple layouts files. Ideally, these are all sharing the same layout and we can link between them. I ended up making a new layout and having links to all of the other admin pages. Painfully switching the URL more times than I would like to admit.
Folder structure takes a little getting used to but since the redwood extension has come out that has been a huge help in flattening it. Normally I use file search but sometimes that gets rough if you have things named similarly. I do wonder how it will work when there are a ton of files in the extension outline. In the example below I have events and an admin page for event/events. Also, I don’t think the extension currently supports navigating to the sdl files
Example
At the bottom of our services we export an object
this was a bit confusing and magic to me. And I raised it in the discord as well as someone a few weeks later. Both links are here and here In one of my files I didn’t generate so I got a bit lost. From my understanding now they get pulled into
but it is still a bit of magic and would be nice to find some documentation on this.
Prisma - To be fair I am pretty new with Prisma and Grapqhl as a whole but this did provide a pretty easy and accessible way to start learning and messing around. I think the one thing I got stuck up on here was updating nested relations. Events have teams and teams have players and players have twitch channels. So that was a bit tricky updating that in the forms and in the prisma functions.
Not much I think in terms of things that redwood can do here besides maybe a little more documentation. I definitely had to do a deep dive into the Prisma docs which are a little rough around the edges.
Apollo - I think apollo works pretty well but this was pretty annoying. I implemented on the admin side a search to look up twitch channels. When apollo returns it has a __typename key so you can’t just automatically pass that data to your update functions because your input isn’t expecting __typename So you end up having to do stuff like this. Where I brought in lodash-omit just to be able to easily send and populate a dropdown. Also, there has been an open issue on this since 2018 on the apollo docs when I was looking around how to solve the issue Sorry about the squiggles I moved the code up for the screenshot
Would you be interested in doing a demo at a future RedwoodJS Meetup?
I would definitely be open to doing something in the future. I have a few more things I want to clean up but definitely.
Okay think that is enough for now. If I think of any of the other things that came up. I will comment back. I feel like there was at least one more that I forgot. I hope the info helps. I look forward to contributing as much as I can. Also still need to get my hacktoberfest submission in. Just wanted to get this project out the door and get something shipped.
Thanks for your well thought out improvement points!
If it was possible to do this
<Route path="/about" page={AboutPage} name="about" layout="PageLayout" />
Would that have solved your problem? (For example, do you have a 1-to-1 mapping between your paths and a single layout? Is the Layout always the top level element on all your pages? Etc). And if it doesn’t solve your problem, could you have redesigned anything on your end to make it work?
This sounds interesting. Could you elaborate a little about the problem, and your proposed solution?
What I usually do is I include parts of the folder structure in my search as well, or more parts of the file name. Like if I wanted to go to the admin event page I might type in adEvP.
Yeah, I asked about that as well, and I’m still fully sure of how that works and what it’s used for. Some more docs would 100% help here.
Rad! I’ll be in touch about this sooner than later. Even talking through the items you discuss would be 
Thanks in advance. 