❓ What is this?

Testing assingment for Thinkeasy that I've finished in 2 days. I wanted to work with the suggested tool, so I took some extra time to learn those that I did not know from before.

Checkout the demo on thinkeasy.cibulka.codes.

Read the assingment as given by ThinkEasy

Please finish it in 7 days: Your task is to write a full-fledged mini application which will include 2 parts.

• Authorization
• Posts

The following functionality is mandatory

• Authorization and token update
• Ability to view all posts
• Ability to view posts of a specific user
• Create a post

Not required, but encouraged

• Notification of creation/editing
• FE side error handling since it is a very small application
• Search for posts (search should be done by title or part of the content)
• Handling loading status from Skeleton or Spinner

Backend urls:

• https://frontend-test-be.stage.thinkeasy.cz/api - Swagger
• https://frontend-test-be.stage.thinkeasy.cz/api-json - OpenApi 3.0 schema

Libraries

Required

• React 18 /NextJs 13+, Typescript

Desirable

You can use anything you like, but here is a list of what we prefer

• Form - React-Hook-Form
• State Managment - Recoil
• Notification - Toastify
• API - Orval
• Style - Tailwind
• UI - Chakra

Note: I have not use Toastify as it does not support TypeScript (and probably is not maintained). I used react-toastify instead.

Note: I did not feel the need to use any specific UI library, hence no usage of Chakra.

📦  Features

• Fully responsive and optimized for touch screens
• Loading skeletons (to improve percieved performance and prevent "cumulative layout shift")
• Searchable content
• "Toast-style" notifications of post creation
• Ability to add new post (with expanding textarea)
• Persisted login information (in session storage, which is not a subject of "cookie law")
• Custom 404 page

🖥️ Screens

• Searchable list of posts: /
• List of authors (with possibility to open a page of posts of each of them): /posts/user
• Login page: /login
• Signup page: /signup
• 🔒 Create new post: /create
• 🔒 User profile page: /user

🔧  Install & Use

You can visit the demo of the project on thinkeasy.cibulka.codes or run it locally:

npm install
npm run dev # For development
npm run build && npm start # For production preview

➕  Room for improvements

Post editing

Brief asks for notification on "post editing". I can not see any post editing endpoint on Swagger however.

User info can not be retrieved outside of login

Because of this I can not show user info on profile page when user refreshes the page (and is logged in with refreshToken stored in their session storage).

User info is missing in Signup response (however is present in Login response)

I can recreate the user info from submitted data during signup, however I do not have their ID. For this reason I can show their posts only after 2nd login.

In login response, BE sends the hashed password of the user

I don't think that should happen.

👨‍💻 More about me

Visit my site on www.cibulka.codes or download my resumé.

🎮 You can also play some Tetris! If curious about the details, visit the open source repo on github.com/cibulka/react-tetris-ts.

Thank you, this assingment was fun!