/snippng

Create and share beautiful images of your source code.

Primary LanguageTypeScriptMIT LicenseMIT

Contributors Forks Stargazers Issues MIT License LinkedIn


Logo

Create and share beautiful images of your source code.

Generate snippets · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Roadmap
  4. Contributing
  5. License
  6. Contact

About The Project

Logo

Create and share beautiful images of your source code. Start typing or paste a code snippet into the text area to get started.

(back to top)

Built With

  • Next
  • NodeJs
  • Typescript
  • React
  • tailwindcss
  • Firebase
  • Jest

(back to top)

Getting Started

To get a local copy up and running follow these steps.

Prerequisites

You need NodeJs and yarn installed on your machine.

  • yarn
    npm install --global yarn

Firebase prerequisites (optional)

Firebase is used in this project for authentications and to store snippets. In order to contribute in the part requiring Firebase, create a file called .env inside the root folder and add the following credentials in it once you create a Firebase app.

NEXT_PUBLIC_FIREBASE_API_KEY=<your_FIREBASE_APP_API_KEY>

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your_FIREBASE_APP_AUTH_DOMAIN>

NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your_FIREBASE_APP_PROJECT_ID>

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<your_FIREBASE_APP_STORAGE_BUCKET>

NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<your_FIREBASE_APP_MESSAGING_SENDER_ID>

NEXT_PUBLIC_FIREBASE_APP_ID=<your_FIREBASE_APP_APP_ID>

NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=<your_FIREBASE_APP_MEASUREMENT_ID>

NEXT_PUBLIC_PEXELS_API_KEY=<your_NEXT_PUBLIC_PEXELS_API_KEY>

# don't change the following env var
NEXT_PUBLIC_PEXELS_QUERY_URL=https://api.pexels.com/v1

It does not matter what credentials you add to your .env file, as the app won't crash while developing since the error is taken care of for the Firebase services that are unavailable.

Installation

  1. Clone the repo
    git clone https://github.com/wajeshubham/snippng.git
  2. Install NPM packages
    yarn

Run locally

  1. Run the development server
    yarn dev
  2. Run the test to test your changes
    yarn test

OR

  1. Run using docker. make sur you have Docker installed on your machine.
    docker-compose up --build

(back to top)

Roadmap

  • Add theme presets to choose from
  • Option to create/save single default editor config for user
  • Publish your themes
  • Inject images in the background from url and pexels
  • Import and export snippng config to quickly build the editor (download the JSON file with editor config)
  • Custom theme configuration
  • Build more themes to choose from

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Do some magic 🪄 inside the code. Write/Run tests before committing
  4. Commit your Changes (git commit -m 'Add some AmazingFeature')
  5. Push to the Branch (git push origin feature/AmazingFeature)
  6. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.md for more information.

(back to top)

Contact

Shubham Waje - @linkedin/shubham-waje

Project Link: https://snippng.wajeshubham.in

(back to top)