https://github.com/max-programming/styler
The Next-Generation CSS Builder in the web for your hashnode blog ✨️
https://github.com/max-programming/styler
Last synced: 4 months ago
JSON representation
The Next-Generation CSS Builder in the web for your hashnode blog ✨️
- Host: GitHub
- URL: https://github.com/max-programming/styler
- Owner: max-programming
- License: mit
- Created: 2021-08-28T07:37:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-28T07:50:55.000Z (over 4 years ago)
- Last Synced: 2025-04-04T06:14:36.056Z (9 months ago)
- Homepage: https://styler.vercel.app/
- Size: 33.4 MB
- Stars: 0
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Syler 🎨
View Demo
·
Report Bug
·
Request Feature
### Introducing Styler 👋
Styler is the next gen custom CSS builder developed to supercharge your hashnode blog. Styler comes with awesome features like Live Preview, Dark Mode Support, Breakpoints support, templates and much more to standout out your blog. Try out [Styler](https://styler.vercel.app/) 🙌
[Read blog to understand better 📖](https://savio.xyz/introducing-styler-the-most-powerful-cover-image-generator-for-your-hashnode-blog)
## 🚀 Demo
Try the App: [styler.vercel.app](https://styler.vercel.app/)
## 🧐 Features
Let me share the outstanding features of Styler.
- 💯 **Live Preview**
- 🎩 **No more inspecting**
- 🍭 **Break Points Support** (mobile, tablet, desktop)
- 🌘 **Dark mode Support**
- 🌱 **Ready to Use Templates**
- 🥁 **Generate CSS for Home and Article Page**
- 💻 **Fully Responsive**
- 🔥 **CSS AutoComplete**
- 🚀 **Handle hover, focus effects**
-✨️ **Instructions on how to use**
- ⤵️ **Full creative freedom (user fonts, before, after, nth-child() and everything )**
Take your blog to next level wih styler, lets go to the moon! ✨️
## 🛠️ Installation Steps
1. Clone the repository
```bash
git clone https://github.com/saviomartin/styler.git
```
2. Change the working directory
```bash
cd styler
```
3. Install dependencies
```bash
npm install
```
4. Create `.env` file in root and add your variables
```bash
AUTH0_SECRET= YOUR_AUTH0_SECRET
AUTH0_BASE_URL= YOUR_AUTH0_BASE_URL
AUTH0_ISSUER_BASE_URL= YOUR_AUTH0_ISSUER_BASE_URL
AUTH0_CLIENT_ID= YOUR_AUTH0_CLIENT_ID
AUTH0_CLIENT_SECRET= YOUR_AUTH0_CLIENT_SECRET
NEXT_PUBLIC_SUPABASE_URL= YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY= YOUR_SUPABASE_ANON_KEY
```
5. Run the app
```bash
npm run dev
```
You are all set! Open [localhost:3000](http://localhost:3000/) to see the app.
## 🍰 Contributing
- Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/saviomartin/styler/compare).
- Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
## 💻 Built with
- [Next JS](https://nextjs.org/)
- [Auth0](https://auth0.com/): Complete User Authentication
- [react-icons](https://react-icons.github.io/react-icons/): for icons
- [supabase](https://supabase.io/): for database
- [headless-ui](https://headlessui.dev/): for components
- [codemirror](https://codemirror.net/): for code blocks
- [query-string](https://github.com/sindresorhus/query-string): for parsing query
- [Material UI](http://material-ui.com/): for components
- [Vercel](http://vercel.com/): for hosting
## 🌈 What's next
Here is the roadmap of the future of Styler 🤞
- history of prevois codes
- Share preview URLs
- Live Collaborate with patner
- More Templates
- Better Position Tracker
- Change the default preview page with users own page
## 🛡️ License
This project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.
## 🦄 Deploy
## 👨💻 Author
### 👤 Savio Martin
- Twitter: [@SavioMartin7](https://twitter.com/SavioMartin7)
- Github: [@saviomartin](https://github.com/saviomartin)
- Hashnode: [@saviomartin](https://hashnode.com/@saviomartin)
## 🙏 Support
This project needs a ⭐️ from you. Don't forget to leave a star ⭐️
If you found the app helpful, consider supporting me with a coffee.
---
Styler needs a ⭐️ from you