Siamak Kosari
Siamak Kosari

Siamaks portfolio

Welcome to my personal portfolio page. This site was built using the NextJS framework based on the React library, hosted on Vercel for its SSR capabilities. User authentication is done in AWS Cognito and the API for the Family Tree is done in GraphQL using AWS Amplify. The main point of the pages on this site is to demonstrate CRUD operations in NextJs. This will be clearly explained on each page. For instance this page uses static site generation which is the default method used in next. This page also fetches data and refreshes it as it is added with the useSWR hook. The stale while revalidate hook is very clever in that it fetches fresh data from an api using any asynchronous method. To view an example switch to desktop mode to reval desktop only data

Code Example coming very soon: from the swr docs "SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data"

Abstract Design

In order to break this site up to make theming it with CSS and Material and whatever frontend design libraries I choose to utilize next by designing react components using things like the DOM and User data were abstracted out using hooks and context. Having the ability to trigger using something as simple as importing a destructured object make building out the interface very easy. This site is built so I can add any front end ui libraries and still deliver a seamless experience. If you'll notice changing from html to material takes no time at all since all the main pages have already been statically generated and can be delivered as small packages to the user.

Using react hooks I import whatever state I need through JSX. For instance I want to know the window scroll position looks like this {scrolling}. This gives me a true or false state that can be used to trigger things and is synchronized with multiple other components to perform whatever function I need like loading the bottom navigation bar in the material theme. or creating a really easy to implement dark mode.

Desktop or Mobile

Responsive design is central to every website. And this site holds true to that idea. Initially I started out determined to only use flexbox to make the migration to React Native a little easier, but then realized that I don't need to limit technologies to save time. Because NextJS uses react it makes responsive design easily attainable. I have implemented css techniques as well as react and material design techniques to achieve responsiveness wherever I felt it was needed. And its because of this flexibility I am confident that I can change any behaviour I want with minimal effort.

Responsive design is also nicely paired with Dark mode. Implementing dark mode is easy with React. You start by creating a centralized state, In my case i made a ThemeProvider using createContext. Then wherever I need it my isDarkMode object I can import it and use it since my ThemeProvider is being provided to my entire layout. With NextJS serving just the plain old html and javascript to the browser having this centralized state object and serving to clients as a static page with only a few kb of data, you'll notice that the performance of the site is extremely fast. My real experience score has never gone below 98 throughout development.

useLocalStorage is it safe?

On this site You will be able to add to these pages below using the post form. I added a useLocalStorage state hook that saves all you write in your browser cache in case you navigate away or refresh... In this use case I feel it is perfectly safe since we are not touching any kind of authentication. So feel free to log in with the default account and add a post. These initial posts BTW are just hard coded as an array for instant loading, but custom pages will have some loading time which hopefully you don't notice because of the infinite scroll.