MERN and SSR - small website study

Stack

• React.JS
• Typescript
• Next.JS
• Remix
• Node.JS
• Express.JS
• MongoDB + Atlas

Top rated cats - home page

Search cats page

Liking a cat

Cat profile page

Mobile view of profile page

Tasks

• - 1 - Server - set routes
• - 2 - Client - Next.JS project started
• - 3 - Client - routing
• - 4 - Client - GET data from the server (all requests tested)
• - 5 - Client - like cat POST request
• - 6 - Client - UI & design - started
• - 7 - Client - fix Next.JS rendering performance - too slow - use React Suspense, build, start
• - 8 - DB - add cats (data)
• - 9 - Server - convert to typescript
• - 10 - Client - move search box to header
• - 11 - Client - move cat/:id route to cats-search/:id & delete cats route
• - 12 - Client - home page - converted to server component. Replaced state with next.js loading & error handling & server fetch function
• - 13 - Client - spinner component created
• - 14 - Client - CatsSearchSuspended - converted to server component with loading, error & server fetch
• - 15 - Client - removed suspense, moved fetch functions to separate file. Search grid component - use next.js searchParams props instead of hook.
• - 16 - Client - styling
• -- Small card - styling completed
• - 17 - Client - removed cats data fetch caching to enable like PUT request to update like count even after refresh.
• - 18 - Client - cat page - get data with fetch by id instead of session storage
• - 19 - Client - top rated - flex layout
• - 20 - Client - cat page - styling
• - 21 - Client - mobile layout

Future tasks

• - 22 - Comment the code
• - 23 - Get cats array queries
• -- Mongo projection - get only required fields
• -- Dynamic pagination (client & server)
• - # - MongoDB - update cats' image urls to smaller images. Currently getting large images.
• - # - Mongo Index - add index on the cats collection name field - for faster querying of search cats by name
• -- Might require Atlas nGram for substring indexing
• - # - Client - replace no-cache from GET requests with Next.js revalidation when likeCat PUT request sent.
• - # - Client - like button - show like count update faster
• - # - FID - First Input Delay - must be improved
• -- Next.js - try turbo for quicker running: "dev": "next dev --turbo",
• -- Check TBT (Total Blocking Time)
• -- Lazy loading - next dynamic imports
• -- Next.js - Bundle analyzer
• - # - Maybe implement express-openapi, next streaming server components, skeleton loader, close mongo client

Cat type

{
  "name": "String",
  "birthday": "ISODate",
  "age": "Number",
  "address": {
    "street": "String",
    "city": "String",
    "country": "String",
    "zipCode": "String"
  },
  "favoriteFood": "String",
  "colors": ["String"],   
  "heightCM": "Number",  
  "weightG": "Number",   
  "image": "String",     
  "likeCount": "Number",
  "breed": "String" 
}

Cat data

Images

https://en.wikipedia.org/wiki/List_of_cat_breeds