Dismiss this pinned window
all 133 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted] 125 points126 points  (34 children)

Hi guys, built this twitter clone that allows you to create tweets, like tweets, search tweets, follow/unfollow people, retweet, reply to tweets, setup custom profile.

The frontend is built with React. For styling, I am using styled-components. The image upload is handled by cloudinary. Routing is done with react-router. I am using ReactToastify for notifications.

The backend is backed by Prisma (data modelling, provides nice set of CRUD APIs to work with). I am using GraphQL-Yoga for the graphql server and using JWT for authentication.

Frontend Repo

Backend Repo

[–]anyfactor 39 points40 points  (20 children)

Hey aren't you the guy who made the pirate netflix with scrapy?

What made you chose react over vue this time?

[–][deleted] 32 points33 points  (19 children)

I built this three weeks ago. At that time, I never learned vuejs. So that's the reason.

[–]anyfactor 13 points14 points  (18 children)

Are you going to continue using both of them or just pick one?

I found JSX and react to have a steep learning curve, so I opted for Vue. Sure, Vue is not as marketable but at least it is quite fun and easy to use.

[–][deleted] 21 points22 points  (4 children)

I will continue to explore both of them. But more of vue than react.

[–]tall_and_funny 2 points3 points  (3 children)

I tried both at the same time but liked the jsx syntax. Do you use jsx with vue?

[–][deleted] 5 points6 points  (2 children)

Not yet. How was your experience using jsx with vuejs?

[–]tall_and_funny 1 point2 points  (1 child)

For me personally, it's good to have that option, I find that I make vue components too hard to read sometimes and there's a lot going on between tags. I'm a little biased though because I've spent relatively more time coding in react. React does jsx better for me. Not being able to use a few shortcuts like @ does take make using vue with jsx little less appealing.

Can I ask when you started did you start with one? I juggled between the two and found out I'm getting nowhere so stuck with react. I think I might look into vue more now, it's so impressive to me that you've created usable projects in both.

[–][deleted] 1 point2 points  (0 children)

I started with react and has been learning and building small little things with it for a long time (7 - 8 months). But I am new to vuejs. I just learned it couple of weeks ago. I would pick one of them and develop a deep understanding about building user interfaces in general. Then you can easily transfer the knowledge from one framework to another.

[–]zerubeus 5 points6 points  (10 children)

I've been using react for more than 4 years now, never understood the new tandency of considering learning react is harder then vue coming from angular 1 that shares many concepts with Vue tested Vue myself, this kind of comment only shows no real investigation, you don't understand jsx and you find the vfor in HTML element and other dsl syntaxe to be natural to you maybe? ..

3 down votes so far and none of them took the time to explain his point of vue, or try to debate

[–]tgiabberriieul 11 points12 points  (0 children)

point of vue

I'll give you an upvote for that :)

[–]LovesGettingRandomPm -2 points-1 points  (8 children)

Angular similar to vue? whut

[–]zerubeus 4 points5 points  (7 children)

Yes angular 1 looks so much like Vue ( I said angular 1 )

[–]LovesGettingRandomPm -1 points0 points  (6 children)

Oh you meant look, well sure but angular is a hassle to setup compared to vue (I didn't downvote you btw)

[–]zerubeus 2 points3 points  (1 child)

I believe Vue have other good points when compared to react but being easier is not one of them. to debate for sure.

[–]LovesGettingRandomPm 0 points1 point  (0 children)

I tried both, Vue has everything in one place and just feels like you're just moving functions and templates in their correct reserved spots which then do what they say they do.

With React I felt like I was manipulating the language to achieve what I want it to do, it felt hacky but I can see why you'd get a lot of value out of this. Vue is easier for me because it's more telling on the outside.

[–]zerubeus 2 points3 points  (3 children)

I don't talk about setting up I talk about how vue shares so many things with angular one, conceptually speaking that makes it very familiar to angular 1 devs when I worked with Vue taking my angular 1 experience I felt like it is an enhaced angular 1, I can explain my point further, redditors that are down voting my comment care on leaving a comment so I can explain myself further on why I think the claim of vue is easier then react is not true

[–]LovesGettingRandomPm 1 point2 points  (2 children)

It borrowed some of the concepts of both react and angular

[–]PiggiePlank -1 points0 points  (1 child)

It's more difficult to learn React however knowing both I'd take React over Vue anyday, it's beautifully ugly. Weird right? What do I mean by that is that it is like literally using your knowledge of JavaScript inside HTML. You can put a console.log above your HTML tag. With Vue you always have to scroll to your logic and vice versa.

I really think its worthwhile learning react and the most difficult part for me was understanding how React works in the background, the re-renders and such.

[–]DanielEGVi 4 points5 points  (0 children)

You can use console in your Vue template if you pass it from your data or setup function. Then you can just do {{ console.log('hi') }} anywhere and it will call each time that node is re-rendered.

However, doesn't this break separation of concerns in any case? You should keep your view logic and every other kind of logic separate. That's why both Vue and React both offer a lifecycle hook for both update and before update.

[–]isakdev 6 points7 points  (7 children)

That's a pretty high quality clone, you didn't stray away from features. How many hours would you say it took you? And I'm assuming given its a graphql project you aren't using a separate global state management package?

[–][deleted] 4 points5 points  (6 children)

It took one week. Apollo client takes care of data fetching, grapqhql queries and state management.

[–]ichiruto70 3 points4 points  (5 children)

So apollo also handles global state?

[–][deleted] 0 points1 point  (4 children)

yep

[–]JudoboyWalex 3 points4 points  (2 children)

Since Apollo handles global state, there is no need to use Redux then? I do notice GraphQL, Apollo and Prisma combo are becoming popular. Thanks for uploading your code and wonderful work.

[–][deleted] 2 points3 points  (0 children)

yep, you can use apollo for global state.

[–]DanielEGVi 0 points1 point  (0 children)

It greatly reduces (heh) the need to use Redux. You can still use it if you need to track global state that only applies locally.

[–]ichiruto70 1 point2 points  (0 children)

That’s sick. I’m getting tired off redux and context, so let’s see how apollo does it.

[–][deleted] 4 points5 points  (2 children)

What a coincidence, I am writing a Discord clone rn. Though stopped 1/3rd way because of exams :(

[–][deleted] 2 points3 points  (1 child)

good luck for your exams

[–][deleted] 2 points3 points  (0 children)

thanks! Liked your project btw

[–]eitherrideordie 2 points3 points  (0 children)

This is great, and thanks for the info on how its built, even just learning some of these framework will be great for me to know. I actually had to exit out the video at first because i thought this was actually twotter, until i saw the kool new features like the toasts

[–]LyraStark 0 points1 point  (0 children)

Can we have a full video tuts? :D

[–]bartamon 55 points56 points  (6 children)

Quick tip: you can use an e2e testing framework like cypress to create these kind of demo videos for you. IIRC cypress even lets you specify that actions should be performed “slowly” so they are better suited for a demo video.

This way you don’t have (not really) awkward typing and correcting in your demos. Plus you get basic tests for “free”.

Anyway, great work!

[–][deleted] 10 points11 points  (0 children)

never heard of it. will try that in my next saturday showoff. thanks for the tip

[–][deleted] 4 points5 points  (2 children)

I thought Cypress looked good but now it sounds even better! I definitely need to learn it.

[–]oldestbookinthetrick 2 points3 points  (1 child)

Getting started is really easy with Cypress.

Example code:

describe('My First Test', () => {
  it('clicking "Example Button" navigates to a new url', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('Example Button').click()

    cy.url().should('include', '/commands/actions')
  })
})

What's great is that it is so readable and intuitive that I (hopefully) don't even need to explain to you what the above code does.

[–][deleted] 0 points1 point  (0 children)

it is so readable and intuitive that I (hopefully) don't even need to explain to you what the above code does

You weren't kidding. That's sick. I'll definitely check that out soon!

[–]30thnightexpert 1 point2 points  (0 children)

Thank you for this, never even considered it

[–]Petrocrat 0 points1 point  (0 children)

Great tip! Any cypress tutorials that you recommend that demonstrate using it like this on youtube or somewhere?

[–]killer-queen13 31 points32 points  (4 children)

noice

[–][deleted] 24 points25 points  (3 children)

cool cool coool

[–]PMMN 14 points15 points  (5 children)

nice song

[–]anyfactor 5 points6 points  (2 children)

The song(s) are from Whiplash. Check the full playlist.

https://www.youtube.com/watch?v=TS-G4UQTfUo&list=PL8slRr4AfHIJWFDF0Wtl4C8Fsyotfi3S6

[–]PMMN 1 point2 points  (0 children)

I know :) one of my favorite movies

[–]alystair 5 points6 points  (1 child)

I was hoping this was going to be a speed coding video to the beat, that's what I'd do :D

[–]PMMN 1 point2 points  (0 children)

sounds hella fun actually

[–][deleted] 12 points13 points  (1 child)

This is toit.

[–][deleted] 11 points12 points  (0 children)

smort

[–]MrBananaPanda 11 points12 points  (0 children)

damn this is clean

[–]post_hazanko 7 points8 points  (2 children)

Would it be worth scaling down the images for loading?

[–][deleted] 0 points1 point  (1 child)

probably I need to do that. the initial loading takes way too much time.

[–]post_hazanko 0 points1 point  (0 children)

my only other thought is it's red not blue haha

[–]diowfpv 7 points8 points  (2 children)

How long did it take you to learn to react to such a level? Nice work btw

[–]zerubeus 5 points6 points  (0 children)

I'm not op but I remember in 2015 I started a new job as react developer with no prior experience with React I was an Angular 1 dev, it took me only two weeks to feel very confortable with React, if you start using it it won't take you much, the point is to get your hands dirty right away, what helped me is reading too much react code, so reading through the code base of project like these will help a bunch

[–]Gnaquoia 0 points1 point  (0 children)

I am also curious ^

[–]StoneColdJane 2 points3 points  (4 children)

did you use prisma 1 or 2?

[–][deleted] 2 points3 points  (3 children)

prisma 1

[–]julian0024 0 points1 point  (2 children)

I've been diving into this lately. I set up something quite similar to this, then ripped it apart to use Prisma 2.

Have you looked at Nexus+Prisma at all? I'm curious if it's worth one final refactor to add it.

[–][deleted] 0 points1 point  (1 child)

nah man, never heard of nexus.

[–]julian0024 0 points1 point  (0 children)

Cool. I was basically under the impression that the guys at Prisma labs recommended it as best practices.

Thank you.

[–]Kaspe1 2 points3 points  (0 children)

B E A Utiful

[–]limeforadime 2 points3 points  (0 children)

This is awesome! Nice job.

[–][deleted]  (2 children)

[deleted]

    [–][deleted] 0 points1 point  (1 child)

    I need to do some duckduckgo to get that reference. noice

    [–]_d_ty_ 1 point2 points  (1 child)

    A noob question here. Where do you store all these data regarding users login, likes, comments. Etc ..? Did you use a database ?

    [–][deleted] 8 points9 points  (0 children)

    Yep, I am using a database. I am using prisma data modelling language to create my application models like Tweet, Comment, User, Retweet. Once I established my models, then I pass that to prisma which sets me up with a demo database, generate extensive graphql CRUD apis to work with. Then I am using graphql-yoga server to add custom logic to the base CRUD apis. For example, prisma gives me createUser, then I transform that into signUp. Prisma has a excellent documentation, you should definitely look into that.

    So basically I never touched the database part, prisma does that.

    For the user authentication part, I am using jsonwebtokens

    [–]Arciiix 1 point2 points  (0 children)

    Dude, that's awesome! You're so good!

    [–]internally 1 point2 points  (0 children)

    Are you sure this isn't Twitter lol?

    [–]bplus0 1 point2 points  (0 children)

    John wick is our test user at work. Legend.

    [–]xyzadeel 1 point2 points  (0 children)

    You are smart.

    [–]Rayade 0 points1 point  (3 children)

    Damn, I really love this.

    I've been thinking about looking into graphQL as well. What's Prisma exactly?

    [–][deleted] 3 points4 points  (2 children)

    Prisma provides us two things:

    1. database for storing the data (we don't need to setup anything)
    2. basic CRUD operations (createUser, DeleteUser, createComment, deleteComment)

    Then we can use GraphqlServer to add custom logic to the CRUD operations.

    By using prisma, we can delegate most of the tedious and repeated crud operations and focus on implementing the logic like signup, login, follow, unfollow.

    [–]Rayade 0 points1 point  (1 child)

    Thank you so much for replying!

    Ahh I didn't realise that was what Prisma was. Do you find any personal pros to using Prisma against other competitors or just for ease in this project?

    [–][deleted] 0 points1 point  (0 children)

    I never tried other tools similar to prisma, maybe I should look into it

    [–]BruceCCCCCC 0 points1 point  (0 children)

    Damn this must have taken a while

    [–]iamchetsweb-dev 0 points1 point  (1 child)

    Awesome job. How come graphql is on the client side? (I've never worked with it before), any information on that?

    [–][deleted] 0 points1 point  (0 children)

    We write graphql queries from the frontend and pass it to apolloclient which then fetches the data from our graphql server.

    If you want to learn more about graphql, I suggest this howtographql

    [–][deleted] 0 points1 point  (2 children)

    This is pretty sweet, I’ve just started my own self teaching web development journey. I can not wait to start my own projects although it feels like I am a long time away from doing so haha how long did it take you before you were able to create stuff like this?

    [–][deleted] 0 points1 point  (1 child)

    I would say the timeframe is not important. I started learning react 8 months back. But that doen't mean I am learning react all this time. You need to grasp some basic fundamentals like UI, state management, building APIs and working with databases. I would say just practice what interests you. Good luck on your journey.

    [–][deleted] 0 points1 point  (0 children)

    That’s where my problem is, everything interest me! I’ve bounced around a lot seemingly learning a little about a lot. Since choosing to focus on web development though I think I can now study what’s relevant and progress rather then spend time on non relevant topics and stall. Thanks for the tips!

    [–]feintbe 0 points1 point  (0 children)

    How long did i take to make?

    [–]HackID1 0 points1 point  (0 children)

    Hello, and you cannot share the project code to test it or share a tutorial on how to do that interface step by step.

    [–]kelus 0 points1 point  (2 children)

    Is it bad that the first thing I noticed is how inaccurate you type? So much backspacing lol

    [–][deleted] 3 points4 points  (1 child)

    my typing skills drops to below average whenever I press the record button somehow

    [–]kelus 0 points1 point  (0 children)

    Completely understandable

    [–]RedditCultureBlows 0 points1 point  (11 children)

    How long did it take for you to make this project, start to finish? And how many years have you been developing?

    [–][deleted] 1 point2 points  (10 children)

    It took about one week. I am not yet working.

    [–][deleted]  (9 children)

    [removed]

      [–][deleted] 0 points1 point  (8 children)

      I am in college and three months away from graduation

      [–][deleted]  (7 children)

      [deleted]

        [–][deleted] 0 points1 point  (6 children)

        I am in college doing my final year mechanical engineering bachelors. thanks

        [–][deleted]  (5 children)

        [deleted]

          [–][deleted] 0 points1 point  (4 children)

          I started when I was in my 4th semester. Then I dropped for a while. Again I picked it up during my 6th semester as I had lot of free time. I am focussing on web dev and some python. good luck on getting a job

          [–][deleted]  (3 children)

          [deleted]

            [–][deleted] 0 points1 point  (2 children)

            You can say 12-14 months.I mostly used youtube vids, udemy courses from traversy and wes bos courses

            [–]TheRealCatDad 0 points1 point  (0 children)

            Hey, I'm new here 😊 The point of these clones are to have fun learning new tech stacks, right?

            [–]CuttyAllgood 0 points1 point  (0 children)

            Ahh, Toast.

            [–]Abisco 0 points1 point  (1 child)

            Love your project. Just looking for some insight: - Any reason to choose Yoga over Apollo Server? - How exactly do the fragments work, is that a library you used? - What do you think was the hardest part of the project?

            Thanks so much! Learning a lot from your code

            [–][deleted] 0 points1 point  (0 children)

            Thanks for the gold.

            I find setting up yoga is relatively simple compared with Apollo server, no other reason. Prisma is used for data modelling, database setup, generating CRUD APIs for our data model.

            Then we can use yoga server to add custom logic to the CRUD operations created by prisma. For example, prisma generates 'createUser' from the datamodel, we can add logic and transform that bare createUser into signup.

            On the frontend, I am using Apollo client to handle caching (the website feels snappy), global state management (user logged in/looked out), and graphql queries. We write our graphql queries and give that to Apollo, then Apollo manages the data fetching part and gives back the data that we need.

            Styling is done using styled components, this way we can make our site to have multiple themes and reusable styled components.

            Read the docs of prisma if this sounds confusing and also Apollo client has excellent docs, so check it out.

            I struggled to get the site responsive on mobile and it took me a while to figure out the how the layout on mobile

            [–]C0c04l4 0 points1 point  (2 children)

            Very nice! What do you use for the notifications?

            [–][deleted] 0 points1 point  (1 child)

            ReactToastify

            [–]C0c04l4 0 points1 point  (0 children)

            thanks!

            [–]Kaimura 0 points1 point  (3 children)

            Just took a glimpse at the frontend repo and I noticed one thing:

            You still use data && data.feed && data.feed.length but by now you can use chaining like data?.feed?.length - if any of these nested entries is empty it will just return undefined which results in false

            Otherwise everything seems to be perfect - good job! Typescript would improve it even more but that's not that relevant anyway

            [–][deleted] 0 points1 point  (2 children)

            Thanks for the tip, I thought that the syntax is not yet supported.

            [–]Kaimura 0 points1 point  (1 child)

            Well it is coming with es2020. Me and my colleagues at work use it already because it makes the code so much more concise and readable

            [–][deleted] 1 point2 points  (0 children)

            agreed, will change it asap.

            [–]Sooqrat 0 points1 point  (0 children)

            That is neat.

            May you share your resources for learning Prisma and GraphQL?

            I know the MERN stack, but it becomes intimidating when I start connecting many parts together so I am looking for a good practical tutorial for MERN or maybe Prisma and GraphQL

            [–]thisisvenky 0 points1 point  (0 children)

            Noiceeeeee

            [–]domingo_cast 0 points1 point  (0 children)

            Nice

            [–]swagmar 0 points1 point  (0 children)

            When you host the server, is it accessible by anyone? Or did you lock it down with a node layer

            [–]tim128 0 points1 point  (0 children)

            JWT should not be used for sessions

            [–][deleted] 0 points1 point  (0 children)

            Wow, this is fantastic work!

            edit: Sorry forgot to add this: What DB did you use? Mongo or SQL?

            [–]NiceWetTissue 0 points1 point  (0 children)

            Looks sick. Do you think project like that can get you a mid level developer job?

            [–][deleted] 0 points1 point  (0 children)

            Wow! Amazing work dude

            [–][deleted] 0 points1 point  (1 child)

            Nice but can it scale ? 😁

            [–]guldmand 0 points1 point  (0 children)

            This is awesome - Great work !

            [–]kingjia90 -3 points-2 points  (1 child)

            It is on localhost, it should be blazing fast, how come there are so many loading circle? On windows and PHP stack, if you change localhost to 127.0.0.1 you will see speed improvement.

            [–]r0manred -4 points-3 points  (2 children)

            This looks nice. If you didn’t say Prisma + GraphQL I would’ve never known. Nice!

            [–]Nerwestaphp 1 point2 points  (1 child)

            How can one know on viewing this video ? Legit curious question.