Skip to content

🌐 - Tweeter Frontend - 🌐 - This is a social network that posibility interact with tweets, user, comment and bookmarks.

Notifications You must be signed in to change notification settings

Wesley-wsl/Tweeter-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌐 - Tweeter Frontend - 🌐

Demo πŸ“Έ


Application deploy with Vercel: πŸ’¨

https://tweeter-wsl.vercel.app

Storybook deploy with Netlify: πŸ’¨

https://tweeter-storybook.netlify.app

πŸ“– About the Project

Tweeter Frontend - This is a social network that posibility interact with tweets, user, comment and bookmarks. This was make with TypeScript how language programming, Storybook to documentation, Jest for unitary/integration tests, Cypress to e2e tests and all informatios/interactions was make consuming a own api make with nodejs.

πŸ“— User Stories:

  • - Create an account.
  • - Sign in in your account.
  • - View the optimal layout for the app depending on their device's screen size
  • - View tweets by user.
  • - Scroll infinite with SWR in all pages.
  • - Filter tweets by Media, Likes, Top, Latest and Tweets
  • - Follow/Unfolllow a user.
  • - Change image of avatar and background from user.
  • - List followings and followers from user.
  • - Edit informations from user.
  • - Show bookmarks filtered.
  • - View your profile.
  • - View users and profile from another users.
  • - Search tweets by content.
  • - Search people by name.
  • - View your feed.
  • - Create new tweet public/private.
  • - Create new tweet with image.
  • - Delete a tweet.
  • - Like/unlike a tweet.
  • - Save/unsave tweet how bookmark.
  • - Create a comment.
  • - Like/unlike a comment.
  • - Delete a comment.
  • - Show main trends.
  • - Show a season that recommend who follow.
  • - Toggle the color scheme between light and dark mode
  • - Keep light/dark mode, even after refreshing the browser.
  • - Logout your account.

πŸ›  Technologies

  • Next.js
  • Typescript
  • Styled-components
  • Storybook
  • Axios
  • SWR
  • Nookies
  • Nextjs-progressbar
  • Framer-motion
  • Styled-icons
  • Fontsource
  • React-toastify
  • React-dropzone
  • React Testing Library
  • React-hook-form
  • Yup
  • MSW
  • Jest
  • Cypress
  • Next-seo
  • Next-PWA
  • Eslint
  • Prettier
  • EditorConfig
  • πŸ’» How to run the application

    Pre-requisites:

    You must have the tools installed: Git, Node.js. And create a new file called: .env.local, that follow .env.example credentials example for connect with a api or execute backend this application.

    # In the terminal, clone the project:
    $ git clone https://github.com/Wesley-wsl/Tweeter-frontend.git
    
    # Enter the project folder:
    $ cd Tweeter-frontend
    
    # Install dependencies:
    $ yarn
    or
    $ npm install
    
    # Run the application:
    $ yarn dev
    or
    $ npm run dev
    

    Okay, now you can access the application from the route: https://localhost:3000/

    πŸ§ͺ Alright, but and the tests ?

    Now the tests about this application was make with Jest and React Testing Library to unitary/integration tests, for tests e2e I used Cypress.

    To run the unitary/integration tests you need only execute yarn test:coverage in the terminal in this directory.

    Now if you want run the tests e2e in Cypress, first of all execute de backend and frontend, create an user and put email and password this user in a file in the root of this directory called cypress.env.json, make this how cypress.env.example. This is only to pass for authentication flux because it is validate with server side rendering, then mock this is not possible now. Maked this you need execute yarn cypress in your terminal in this directory and the magic will happen, you have access to e2e tests with cypress for execute in your machine.


    Then is this... Thank you for stay and Enjoy. :-)

    About

    🌐 - Tweeter Frontend - 🌐 - This is a social network that posibility interact with tweets, user, comment and bookmarks.

    Topics

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published

    Languages