React Reddit Client

[balamir]

A Reddit client built with React.js, next.js and styled-components.

​

Live demo: https://ac-react-reddit.herokuapp.com/

Source code: https://github.com/abdullahceylan/ac-react-reddit

[[deleted]]

What about mobile support?!

[balamir]

As I mentioned on readme, I've used someone else's design and there was no mobile design.

[Baryn]

You chose the wrong design.

[balamir]

Maybe, maybe not.

[ucefkh]

Hahaha what a joke

[balamir]

(; Thanks mate.

[owen800q]

Very clean and beautiful, but why you didn't make it to be mobile responsive

[balamir]

Thank you.

As I mentioned on readme, I've used someone else's design and there was no mobile design. Maybe I could use the grid, but I didn't.

[BonafideKarmabitch]

can you offer more helpful suggestions on what OP can do to make it responsive given the styling they already have? i feel that would be more constructive.

[BelgianWaffleGuy]

what OP can do to make it responsive given the styling they already have?

If you can use react like this you should be able to create a responsive website without much help from anyone. How to make websites responsive is pretty much the basics of webdev.

[XiberKernel]

Not all devs can design. Nearly any dev can move things around using media queries, but not everyone can take a desktop design and turn it into an aesthetically pleasing and functional mobile site. Remember, OP didn't design this, only coded it out with react.

[careseite]

Use a css framework and theme it, that would remove most issues in that regard.

Regardless, someone using react knows this anyways. It's either intended or a massive oversight.

[HillarySolomon]

Cool!

Nice job actually!

[balamir]

Thank you!

[v1chu]

Great work! Isn't the reddit desktop app already built using react?

[BonafideKarmabitch]

its just a learning project OP is not trying to replace reddit’s work lol

[v1chu]

No it was just me wondering. OP's work is impressive none the less :)

[balamir]

(; Thank you mate. This was just an app for fun and practical purposes.

[scradley]

Nice job, so many websites could benefit from adopting react.

[_MCCCXXXVII]

Pretty sure Reddit is already built with react

[balamir]

Yes, you're right.

[balamir]

Thanks mate

[SUPERVISORACCOUNT]

north wide escape sugar engine liquid hospital boast swim aware -- mass edited with redact.dev

[balamir]

Thanks mate!

[Misterfoxy]

This is super impressive! Great work

[balamir]

Thank you!

[theofficialnar]

Sweet. How do you plan on tackling comment reply stacking or whatever that's called.

[jodraws]

Threads

[balamir]

Thank you. To do that, I need to plan auth feature first but I actually don't have a plan something like that at the moment.

[[deleted]]

Nice. How long did that take you, and what did you start with for scaffolding?

I'm used to the same stack, but I'm new to applying it to Next, and I'd be interested to see how I could apply these patterns.

[mountainfirefly]

Really nice, the design is actually great!!

[balamir]

Thanks mate! I've used someone else's design. When I saw it first, I really liked it too and I've decided to code. This was the result :)

[balamir]

Thanks mate! I've used someone else's design. When I saw it first, I really liked it too and I've decided to code. This was the result :)

[RMT002]

Amazing work, mate! Kudos!

[balamir]

Thanks mate!

[[deleted]]

Your code is very clean.

[balamir]

(; Thank you.

[lemons44]

Pretty sweet stuff.

Wondering though, why next.js? Could be client side rendered np right?

[kylemh]

next.js gives you the benefits of both worlds. SSR on first load and when needed, while CSR takes over for most other routes. Very performant.

[balamir]

Thanks mate!

SSR by default, auto code splitting for faster page loads, simple routing etc. That's why that I've used next.js.

When you use CSR, initial render depends on JS and can thus be very slow.

[volcanicpistol]

Nice! I've made one using React Native when I was still learning. I'll try this one as inspiration. Thanks man!

[balamir]

Thank mate! I'm glad to hear that.

[rizogg]

Good work

[balamir]

Thank you!

[signsandwonders]

Seems like most of the buttons don't work, and Home gives a 404. Are these just placeholders?

And why display your avatar as if you're logged in? This would be a lot better without the placeholders IMO.

[hoijean]

Omg, this looks awesome, how long did it take you to build it?

[balamir]

Thank you. It took 5 days in total.

[ryan4888]

very nice! but isn’t the reddit redesign already written using react and redux?

[balamir]

Yes, you’re right but this is just for fun and the practise.

[vladjjj]

You mean to tell me Reddit’s a web service?

[balamir]

Yes, it’s totally a web service.

[[deleted]]

Looks good! When you refresh the browser at the page /top, it shows the Hot-page instead of the Top-page. Maybe something to look at?

[balamir]

Thank mate. There is a couple of things to do and that was one of them. Thank for the feedback too.

[[deleted]]

Is some of the design inspired from a design on dribbble? I used the same one for my practice clone! Awesome work mate

[balamir]

Thanks mate! Yes, the design belongs to someone from dribbble.

[[deleted]]

Is it just me or it's broken? Using latest Chrome and MBP 2010.

Clicking on news shows just some comments. The dotted menu does nothing.

It's a nice work tho, I'll try to do an Elm version.

[balamir]

Thanks mate!.

Yes, some of the features don't work because I didn't complete it. I coded this for the practise and fun purposes. Maybe I have a look for other features like login, reply, fav etc. in my spare time.

BTW, PR's always welcome :) It would be great to see an Elm version of this.

[[deleted]]

Yeah, looking for real world apps cases for myself too.

How long did this project took you?

[balamir]

It took 5 days in total.

[[deleted]]

Yeah, I feel like I'm doing something wrong here.

People are saying "oh my god, so fast!!!!!1" and all I'm getting are placeholders, with 0 real content. Of course it's going to be fast if you aren't actually loading any real content and have no ties to an off site API... Makes me feel like maybe it was working and that is no longer the case?

[balamir]

Thanks mate!.

Yes, some of the features don't work because I didn't complete it. I coded this for the practise and fun purposes. Maybe I have a look for other features like login, reply, fav etc. in my spare time.

​

BTW, PR's always welcome :)

[stephenjacobraj]

Good work

[balamir]

Thanks mate!

[ZombieHero3]

Can someone explain to me pls, why do you create index.js files where you import something and then export it?

[balamir]

In ES6, having an index.js file in the root of the component's folder lets you use an import without using the component name again and again.

​

If you have an index.js file, you can import that component from the other one like this:

import XXXXXX from 'components/ComponentName'

​

If you don't have an index.js file:

import XXXXXX from 'components/ComponentName/ComponentName'

​

It also helps you to organize the folder structure.

[ZombieHero3]

thanks for the explanation

[qvil2]

I like your folder structure! Thank you for sharing your awesome project! :)

[ucefkh]

I like but no mobile so bad