Trolley Problem Memes

Made with HTML, CSS, TypeScript, ReactJS, CSS Modules
Bootstrapped with Vite

🖼 Screenshots • ℹ️ About • ⚙️ Tools • 🔨 How to Build Project • 📁 File Structure

📦 NPM Packages worth mentioning • 💡 Details • 🔗 Useful resources • 👤 Author

🖼 Screenshots

ℹ️ About

Well, I love trolley problem memes, so why not create a site dedicated to that?

I didn't make any Figma prototypes this time.

⚙️ Tools

• HTML5
  • ReactJS
• CSS
  • CSS Modules
• TypeScript
  • ReactJS
• Github Pages

🔨 Build project

Command	Description
npm install	First of all install all required packages
npm run dev	Run the app in development mode
npm run build	Build the app
npm run preview	Run the app in production mode
npm run lint	Check compliance with Eslint rules

📁 File Structure

├── 📁 .github
|   ├── 📁 workflows
|   |   └── 📝 main.yaml      CI/CD instructions for Github Actions
│   └── 📝 dependabot.yml     Instructions for Dependabot
|
├── 📁 docs                   Additional information, documentation
│   └── 📁 results            Screenshots of how the application works after being fully developed
|
├── 📁 src                    Source files needed for application development
│   ├── 📁 assets             Static assets: images, icons, favicons
|   |   ├── 📁 gallery        Images displayed on the page
|   |   ├── 📝 favicon.png    Favicon
|   |   └── 📝 preview.webp   Previw for og:image, doesn't work tho because of Vite
|   |
│   ├── 📁 components         React components
|   |   └── 📁 ComponentName
|   |       ├── 📝 index.tsx          Component logic
|   |       ├── 📝 index.module.css   Component styles
|   |       └── 📝 index.types.tsx    Component types (optional)
|   |
│   ├── 📁 hooks              Custom React hooks
|   |
│   ├── 📝 App.tsx            App React component
│   ├── 📝 App.module.scss    App styles (optional)
│   ├── 📝 index.css          Global styles
│   ├── 📝 loader-spinner.css Styles for spinner displayed before scripts are fully loaded
│   ├── 📝 index.tsx          Entry point for the module bundler
│   ├── 📝 index.html         Main html file
│   └── 📝 vite-end.d.ts      Some Typescript stuff for Vite
|
├── 📝 .eslintrc.cjs          ESLint configuration file
├── 📝 .gitignore             Instructions for Git about what files to ignore
├── 📝 LICENSE                MIT License. Basically you can do whatever you want with the code
├── 📝 README.md              Project description
├── 📝 package-lock.json      Keeps track of the exact version of every package that is installed
├── 📝 package.json           Various metadata relevant to the project, scripts, dependencies
├── 📝 tsconfig.json          TypeScript configuration file
├── 📝 tsconfig.node.json     TypeScript configuration file for Vite
└── 📝 vite.config.js         Vite configuration file

📦 NPM Packages worth mentioning

clsx	For conditional lists of CSS classes
mui packages	Popular component library
blurhash, react-blurhash	For generating a blurred version of a string using a hash string
react-photo-album	For beautiful rendering of photos in rows and columns
yet-another-react-lightbox	For opening images in full-screen mode + some addons for manipulations with images

💡 Details

I learnt how to show blurred versions of images with spinners before they load and then animate transitions to the loaded images. Blurhash and some guides on YouTube help me to understand how it works.

Also this project gave me some more experience in working with external libraries. For example, I used react-photo-album and had to write a custom image renderer in order to implement the logic described in the paragraph above. The documentation about how to do this was scarce, I had to invent ways how to do it, ended up by console logging props and extracting the needed ones from there.

It required some time to figure out how to break react-photo-album in several albums: one for each year so that yet-another-react-lightbox doesn't break. Finally, I found ways how to do it.

I got some practice with image optimization. Mainly, I just optimized the images using tinypng web-service.

Some more Material UI was used in that project.

The site is also responsive, as usual.

🔗 Useful resources

• react-photo-album docs - https://react-photo-album.com/
• yet-another-react-lightbox docs - https://yet-another-react-lightbox.com/
• How to use Blurhash with images - https://www.youtube.com/watch?v=VyUJUD5gyoo
• Optimize images TinyPNG - https://tinypng.com/

👤 Author

• Frontend Mentor - @GrbnvAlex
• Telegram - @Arlagonix
• Github - @arlagonix