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
I was fascinated by this codepen: https://codepen.io/jkantner/pen/GRQaPPV.
The challenge is to replicate the logic of this codepen, but using React. Another task was to add several new features and practice with Materal UI.
I made my own Figma prototype and redesigned the whole application.
Figma prototype: https://www.figma.com/file/smtaFQVSv1tBtsiMHWzksy/Time-Now?type=design&node-id=0%3A1&t=w0rQeWcpLc5UCJK0-1
- HTML5
- ReactJS
- CSS
- CSS Modules
- TypeScript
- ReactJS
- Github Pages
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 |
βββ π .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
β βββ π components React components
| | βββ π ComponentName
| | βββ π index.tsx Component logic
| | βββ π index.module.css Component styles
| | βββ π index.types.tsx Component types (optional)
β βββ π App.tsx App React component
β βββ π App.module.scss App styles (optional)
β βββ π index.css Global styles
β βββ π 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
clsx |
For conditional lists of CSS classes |
mui packages |
Popular component library |
query-string, |
For manipulations with query strings |
It was the first time when I used Material UI components. They make many things extremely simple. Here are the use cases of using this library:
- Icon buttons. For top right menu
- Modal. For the settings modal window
- Button. Is used in the settings modal window
- Switch. Is also used in the settings modal window
- Autocomplete. Likewise
- Toggle Button Group. Likewise
As far as I know MUI, in theory, may help to completely get rid of CSS and rely only on their components. I decided not to do that and use MUI components only in those places where I found them the most valuable, where they saved much time.
For simpler tasks I relied on CSS.
I love the simplicy of CSS Modules. This feature is built in Vite, no need to configure it. And it's extremely easy to use. It with clsx
eliminates any need in usin BEM or Styled Components. I absolutely love it.
The main challenge of this task was to make those digits move from top to bottom in a nicely synchronized manner. Spent many hours trying out different ways to reach that goal. What helped is just using a delayed value.
Here how it looks. There is a block. Inside of that block is a flex container with a top and bottom digit group. You animate this flex container on every change of seconds, minutes, or hours (depends on the group).
In the bottom digit group you show a real value. In the top digit group you show a delayed value. It appeared in the end to be nice and easy.
Also this project allowed me to experiment again with custom hooks. I think they enhanced code readability, very glad about that.
Another little achievement is experimenting with vmin
for sizes. This CSS feature allowed to make the design look great on any screen.
Also I actively used ChatGPT for simple tasks. It still can't gracefully handle complex tasks (or probably I'm just bad at providing correct props), but overall it's a nice addition to StackOverflow!
- Bouncy Block Clock (Codepen) - https://codepen.io/jkantner/pen/GRQaPPV
- Frontend Mentor - @GrbnvAlex
- Telegram - @Arlagonix
- Github - @arlagonix