Assignment submitted by Shivam Dewangan to Terribly Tiny Tales.
Please read Notice for usage of AI before anything else.
NOTE: Each post is clickable and opens a new post url.
This assignment project is hosted on Netlify.
The same can be viewed on https://ttt-stories.netlify.app.
Taken at
Nov 16, 2023 03:38 AMinChrome'sIncognitomode forMobiledevice.
The stories profile data is hardcoded and the posts are generated using OpenAI's ChatGPT.
The same can be found at: /src/data/stories.ts
Vite has been used as a frontend development environment, with ReactJS as the Javascript Frontend Library and Typescript as a type safe tool and TailwindCSS and Sass as styling tools.
Why these tools?
- Vite - It's faster than create-react-app in terms of both development and production build.
- TypeScript - It extends JavaScript and provides type safety during development which reduces the number of bugs delivered in production.
- TailwindCSS - It helps in delivering less CSS to the production build and has simplified utility classes for faster use and easy to remember.
- Sass - It simplifies the usage of CSS and removes the hassle of elaborated query nesting.
- react-router-dom - Provides Routing between URLs giving accessibility to Single Page Applications.
- lucide-react - A react icons library with multiple icons and customization.
- moment - JavaScript package to parse time and convert into multiple output formats.
- classnames - Combines multiple classes and also gives option to add conditional classes with much ease.
- tailwind-merge - Helps with conflicts between two same tailwind utilities.
/src/components/FlatButton.tsx- Flat button used in<Header />. Increases Reusability (while never used again)./src/components/Follows.tsx- Renders a Followers or Following count, nothing much./src/components/Footer.tsx- The<Footer />of the App./src/components/Header.tsx- The<Header />of the App./src/components/Icon.tsx- Renderslucide-iconswith provided bg, color and size./src/components/PostBody.tsx- Renders the blog list at the posts section in home page./src/components/ProfileCover.tsx- Renders the Profile data of the user.
/src/context/index.tsx- Creates an Context JSX.Element to be used as a part of Context API./src/context/StoryContext.ts- Provides the Context API export./src/context/useStories.ts- Simplifies the usage of the ContextAPI.
/src/data/stories.ts- Hardcoded data for the whole application.
/src/layout/Posts.tsx- Renders the posts section in the homepage./src/layout/PostContent.tsx- Renders the blog post at the/posts/:post_idURL path./src/layout/NotFound.tsx- Renders a Not found page in all exceptions.
Provides Types and Interfaces for different Variables used in the project.
Helps in simplifying the basic JavaScript calculations.
/src/util/parseCount.ts- Converts the numbers to strings suffixed with 'K' or 'M'./src/util/parseDate.ts- Parses thetimestampinto a much readable string usingmomentpackage.
/src/main.tsx- Provides the entrypoint for the whole application./src/App.tsx- Defines the routing and fail-safe of the application.
Some features of the project including hardcoded json data and utility functions are generated by OpenAI's ChatGPT.
We all know that some lines of codes can never be remembered. Like most of the developers don't know how to hide
input[type=search]'sXicon or thearrowsin theinput[type=number]or how to remove special characters usingregex.
AI is there to help use but we should not become depended on it.
Other than those two parts and some other lines of codes most of the features was incorporated by me. I can explain all the codes if required.
Shivam Dewangan
Phone no.: +91 97544 73453
Email address: shivamsubam@gmail.com
Portfolio: MyOasis Tech
LinkedIn: shivamdewangan
University: Lovely Professional University
Uni. Roll no.: 12017103