Skip to main content

Command Palette

Search for a command to run...

Box Shadow Generator - #vercelhashnode project

Updated
3 min read
Box Shadow Generator - #vercelhashnode project
M

An aspirant developer who love to code day and night

Hello Geeks, I'm Martin Paily. I am into React for the last 2 months. I saw the vercel hackathon taking place of hashnode and I thought I should give it a try. I built a very useful tool, every web developer needs, Yeah, you guessed it right. I made a box-shadow generator.

What it does

boxshadow.gif

From the name itself, you guys could understand that this is a tool that could help frontend web developers generate the best box shadow for their needs. It is very efficient and it is fast. It does your work in a matter of seconds.

Create your box-shadow 👊: http://box-shadow-generator.vercel.app/
Github Code 🚀: https://github.com/martinthampi/box-shadow-generator

Inspiration

I spend much time changing the X and Y of the box-shadow to fit my need. I spend time on transparency and other kinds of stuff. So, as a solution to this problem, I decided to code a box-shadow generator.

Another thing is that the commonly used box-shadow generator developed by cssmatic.com has recently shut down and the need keeps on rising. So, introducing mine.

error.png

I also found some alternatives but they're really worse*. They do the job but are of very bad UI and user experience. I could not use such sites to meet my need.

Development

I used React for the development of this project. The packages that helped to create this project was

  • @material-ui/core for the styles of different UI components
  • react-color for to get the sketch color for our app

I initialized the project with create-react-app and then installed dependencies. I tried to maintain the coding standards and I hope I am successful in doing so. After developing the app on localhost, I pushed the code to Github.

After that, I hosted my project on vercel. Vercel is super awesome, it could host any project of yours for free. It was also so easy to connect our app with vercel.

Contributing

Feel free to add an issue or a pull request

Concluding

Yeah, you reached the end. Go ahead and start using it for your next projects. I hope you found it helpful. Go add some reactions and support me by adding some comments and ⭐ staring the repo.

Thanks, Good day!

R

Good app, useful product. Thanks for developing ❤️

1
X
Xavier5y ago

Good app, useful product. Thanks for developing. Best wishes.

S

yes great work Martin Brother, yup its messy to match x and y as a developer.

2
M

Absolutely true, matching x and y are some of the messy work of a developer. I hope you liked the app. Keep supporting...

2
M

Interesting, look like the integrated feature in firefox and chrome. Could it support rem ?

1
M

Hello there, It is not an integrated feature. I think it doesn't support rem. Thanks for the comment Michaël Lebeau

1
D

Great app, works well. Really a great help. Thanks @martinkp

4
M

Thanks Divya Xavier, Glad I could help you and meet your needs. Thanks for the support. Share with your friends. Thanks

1