Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brenoliradev/smarthis-react-test
A test using React for smarthis
https://github.com/brenoliradev/smarthis-react-test
Last synced: 26 days ago
JSON representation
A test using React for smarthis
- Host: GitHub
- URL: https://github.com/brenoliradev/smarthis-react-test
- Owner: brenoliradev
- License: mit
- Created: 2022-08-29T16:52:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-04T19:49:53.000Z (almost 2 years ago)
- Last Synced: 2024-04-30T02:27:45.209Z (8 months ago)
- Language: JavaScript
- Homepage: smarthis-react-test.vercel.app
- Size: 1.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Guide to Run Locally:
-------------------------------------------------
- Clone and Install with `npm install` or `yarn install`.
- Use `npm run dev` or `yarn dev` to run it as Dev.
- You'll need to setup the .env variables since this project uses the Twitter API.
- You'll have to setup `NEXT_PUBLIC_TWITTER_CLIENT_ID` and `NEXT_PUBLIC_TWITTER_CLIENT_SECRET` that is responsible for making the OAuth 2.0 working and after that, you'll need to setup `NEXT_PUBLIC_TWITTER_BEARER` which is the Bearer Token responsible for making calls with the Twitter API inside the Next API.
- Check out the Live Version - [Smarthis Challenge - Breno Lira](https://smarthis-react-test.vercel.app/)
- You can see it working on [YouTube](https://www.youtube.com/watch?v=KCVCaauo5mQ)
Sumary
-------------------------------------------------
- This project is made using Smarthis test requiriments.
- It was made using Next.js, TypeScript and Tailwind. The Authentication is controlled using Next-Auth and handled with a custom Login Page. The UX/UI is based on [Smarthis Website](https://smarthis.com.br/) itself.
- The information from the user is handled by the Next API after the user logs in with the OAuth.
Home
-------------------------------------------------
- The home is a simplified home of their home, using their animated SVG images in ther respective `Object` tags and also a custom animation using Keyframes that try to copy their website animation.
API - Tweets
-------------------------------------------------
- The connect and disconnect is handled within Next.js itself using the `[...next-auth.ts]` page. And the API can be acessed through `https://smarthis-react-test.vercel.app/api/tweets/:id` and the `id` is a slang that is generated using the OAuth v2.0 information.
With/Without User
-------------------------------------------------
- The home itself dinamically changes if the user is Logged or not.
- It has an simple dinamic UI with a button - if the user has to login - from Smarthis Website and also an animated `object`.
Custom Signin page
-------------------------------------------------
- This page is nedded to confirm the next-auth before the user is redirect to Twitter.
- It has an simple UI with a button from Smarthis Website and also an animated `object`.
Embed Tweets
-------------------------------------------------
- Once the user is Authenticated the Home will display his last 100 tweets.
- It's using `react-embed-twitter` to make an easier but completely functional Twitter implementation.
- I'm using a custom embed component so I can add a simple loading state and a Fade Animation using the "onLoad" property from `TwitterTweetEmbed` component.
- I'm using `react-infinite-scroll-component` to make the Timeline updates when the user scrolls down. Preventing issues with Performance since with that the App will not load all embeded tweets in the same time.
Navbar
-------------------------------------------------
- The Navbar is pretty accurate to their Navbar. It also has their `:before` animation.
- But, since we have a Authentication the navbar shows the user Photo and also a Sign Out button when the user is Logged in.
Footer
-------------------------------------------------
- Also an accurate version of their Footer.
