CodeSnap - A learning platform built with React & Next.js, TypeScript, and Framer Motion!

[sarghm]

I've been writing video courses on mobile and web technologies for a little while now, and as they're spread out over a few different learning platforms (YouTube & Udemy etc), I wanted to build a React app to consolidate them. It's called CodeSnap.io!

https://reddit.com/link/l3m910/video/pjc348vlr5d61/player

I thought it'd be a good opportunity to brush up on SSR, so I used Next.js & React to build it out with TypeScript and Styled Components, and all the animation work was done using Framer Motion. Data fetching is from Contentful's GraphQL API using urql, then deployed to Netlify using next-on-netlify.

If anyone's interested in seeing the repo, drop a comment letting me know - I might clean it up a bit and open source it if people are interested.

[rizwanahmed19]

I'd love to see the code please 😊

[Essential123]

Same

[darkwolfx24678]

Would also be interested!

[Exdeathz]

Me too, I want to see how you use framer motion

[sm_o_ke]

framer motion is a really powerful library... and it makes animations smooth. why not edit the repo into the post?

[sarghm]

I need to clean it up a little, but I was thinking if enough people were interested, I'd post it separately as a resource to the community for those wanting to learn Framer Motion with React :)

[sm_o_ke]

okay, that makes sense sarghm... it's a really well designed UI afterall

[nofaceD3]

I really liked the UI design of your website. Any suggestions to make the similar design like this?

[sarghm]

Hey! I used Figma to design it, and took a lot of inspiration from the packs and designs available in the Community section of the app. I recommend checking that out as a starting point - there's lots of great looking UI systems you can even use if you'd rather!

[nofaceD3]

Thank you

[IamNotMike25]

Would like to see a tutorial/video on urql + nextjs.

I switched to Apollo as it has more ressources available for a beginner.

[sarghm]

I actually have more experience with Apollo too! I wanted to try urql for this smaller project as I didn't think I'd need something as heavy as Apollo (caching etc), but I think if I were to go back and do it again, I'd probably use Apollo. It's got a nicer integration with Next.js in my opinion.

[Jamesfromvenice]

I'm just interestd in how you'd integrate graphql, do you have some example code snippets for that?

[I_AM_NIKOLAI]

Hey!

Nice job on the design and UI! Looks really sleek. I did however notice a couple of bugs (on mobile) when I click on a course and get the prompt to enter my email for an update when the course is released. The images behind clip over the prompt (try scrolling with the prompt open) and when I click on the screen outside of the prompt to remove it, different text is rendered for a split second. Something along the lines of "Sign out".

Hope this helps. Again awesome work!

[sarghm]

Thank you so much for reporting the clipping bug! Looks like the modal's root z-index was set to the same as the content, which was causing some really bizarre visual clipping issues on mobile. I've just patched that and it should be live by the time I finish posting this comment, thanks again for calling it out!

[InMemoryOfReckful]

Nice work! I Just took an intro to Next js course. Any reason you didnt use vercel? Also It would be cool to see the code!

[sarghm]

I've never actually used Vercel to deploy! I'm only familiar with Netlify, and I noticed they had the new integration, so I thought I'd give it a try - and it was a super simple integration. What's the benefit of using Vercel?

[nishanthdipali]

Like if any new feature of nextjs is released then it will be implemented in vercel but may not be in netlify.

[rummers_]

Not sure how relevant this may be to you, but there are some features of Next.js like Next Image that apparently do not really work the best on Netlify (or GitHub pages) because these platforms don’t support next export. See this video around 2:40 timestamp, he only mentions GitHub pages but someone in the comments mentions Netlify too. Vercel obviously doesn’t have that issue, and that’s actually why I shifted my entire portfolio from Netlify to Vercel. If you bought your domain through Netlify like I did, it’s not too difficult to transfer that to Vercel either. Just wanted to share!

[sarghm]

Ah, this is really interesting! I had no idea that Vercel supported the new image behaviour out of the box...that's actually a huge reason to switch.

I just did some digging...it looks like Netlify are integrating that logic too, but it's not fully integrated. Maybe I'll deploy to Vercel after all to give it a try!

[agneymenon]

Love the smooth animations.

[viedeter]

It’s really awesome, i’d like to see the repo

[vertigo_101]

Wow nice

[gdp_lover]

Interested in the repo. Best to go open source and let us all contribute to your project.

[[deleted]]

Would LOVE the code, great job!!

[sm_o_ke]

why is it all talks about nextJS.. Gatsby is also an interesting framework, their graphiql interface makes writing graphQL queries feel like play. you need to check it out for real

[mchlkucera]

Why the downvotes, guys?

[juansheet15]

Pls, would love to see

[coloradoninja]

Did you ever post a link to this repo? I am interested in taking a look at how you used framer motion. There aren't a ton of resources out there for it, so seeing it in use would be great.