Skip to content

🌐 - Tweeter FullStack- 🌐 - 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-FullStack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌐 - Tweeter FullStack - 🌐

Demo πŸ“Έ


Front-end deploy with Vercel: πŸ’¨

https://tweeter-wsl.vercel.app

Storybook deploy with Netlify: πŸ’¨

https://tweeter-storybook.netlify.app

Back-end deploy with Railway: πŸ’¨

https://tweeter-backend.up.railway.app/docs/

πŸ“– About the Project

Tweeter FullStack - 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.

πŸ“— Features:

πŸ“˜ Frontend

  • - 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.

πŸ“• Backend

Feature Coded? Description
SignIn. βœ” Ability to signIn in application.
Create User. βœ” Ability to create a account.
Show all users. βœ” Ability to show all users.
Show user by id. βœ” Ability to show a user by id.
Show followings. βœ” Ability to show all followings from a user.
Show followers. βœ” Ability to show all followers from a user.
Show bookmarks. βœ” Ability to show bookmarks from a user.
Show who follow. βœ” Ability to recommend users to follow.
Edit informations and image about user. βœ” Ability to edit informations and images about user.
Following a user. βœ” Ability to follow a user.
Unfollow a user. βœ” Ability to unfollow a user.
Create a tweet with image. (optional) βœ” Ability to create a image with or no image.
Show all tweets. βœ” Ability to show all tweets.
Show tweets by user. βœ” Ability to show tweets by user.
Show tweets private only if follow this user. βœ” Ability to show tweets private only if follow this user.
Show trends for you. βœ” Ability to show main trends.
Save tweet how bookmark. βœ” Ability to save a tweet how bookmark.
Remove tweet from bookmark. βœ” Ability to remove a tweet from bookmark.
Like a tweet. βœ” Ability to like a tweet.
Remove like from tweet. βœ” Ability to remove a like from tweet.
Delete tweet. βœ” Ability to delete tweet.
Create a comment for a tweet with image. (optional) βœ” Ability to create a comment for a tweet with or no image.
Like a comment. βœ” Ability to like a comment.
Remove like from comment. βœ” Ability to remove like from comment.
Delete comment. βœ” Ability to delete a comment.

πŸ›  Technologies

πŸ“˜ Frontend

  • 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
  • πŸ“• Backend

  • Typescript
  • Node.js
  • Express.js
  • TypeORM
  • PostgreSQL
  • Multer
  • Celebrate
  • Cloudinary
  • Jest
  • ts-node-dev
  • Bcryptjs
  • JWT
  • Swagger
  • Docker
  • EditorConfig
  • Prettier
  • Eslint
  • πŸ’» How to run the application

    To run this fullstack application you must follow the steps of both the frontend and the backend in the repositories below to run them in sync.

    See the repositories:


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

    About

    🌐 - Tweeter FullStack- 🌐 - 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