ankitapuri / pixelvibe

This a Pixel-art maker with add-on features.
MIT License
43 stars 95 forks source link
bds css3 django front-end-development html5 javascript pixel-art

[![Number of Contributors](https://img.shields.io/github/contributors/FOSS-Cell-GECPKD/pixelvibe)](https://github.com/FOSS-Cell-GECPKD/pixelvibe/graphs/contributors) [![Issues opened](https://img.shields.io/github/issues/FOSS-Cell-GECPKD/pixelvibe)](https://github.com/FOSS-Cell-GECPKD/pixelvibe/issues) [![Issues closed](https://img.shields.io/github/issues-closed/FOSS-Cell-GECPKD/pixelvibe)](https://github.com/FOSS-Cell-GECPKD/pixelvibe/issues) [![PRs open](https://img.shields.io/github/issues-pr/FOSS-Cell-GECPKD/pixelvibe)](https://github.com/FOSS-Cell-GECPKD/pixelvibe/pulls) [![PRs closed](https://img.shields.io/github/issues-pr-closed/FOSS-Cell-GECPKD/pixelvibe)](https://github.com/FOSS-Cell-GECPKD/pixelvibe/pulls) ![Repo size](https://img.shields.io/github/repo-size/FOSS-Cell-GECPKD/pixelvibe) ### ๐Ÿ“‹ Description PixelVibe is a pixel-art maker which is mainly made for the creative art lover in you ๐Ÿ˜ƒ ### Demo ๐ŸŽฅ ![PixelVib](https://raw.githubusercontent.com/arpit456jain/pixelvibe/demo/static/gifs/2.gif)
![PixelVib](https://raw.githubusercontent.com/arpit456jain/pixelvibe/demo/static/gifs/1.gif)
### โœ…  Features 1. Variable canvas size as per user requirement 2. Choice of colors for user 3. A drop-down menu for - Brush of varying sizes - Eraser for clearing - Undo feature - Delete feature to clear the screen - color fill to fill up the page 4. Signin / sign up page 5. Forgot password feature 6. Can change the password when required ### ๐Ÿ’ป Tech Stack PixelVibe uses a number of open source projects to work properly: ### Front-End: HTML5 CSS3 JavaScript BootStrap ### Back-End: Python Django ### Data-Base: SQLite ### Other: Progressive Web Apps ### Project Structure ๐Ÿ’โ€โ™€๏ธ ``` PixelVibe โ”‚ โ”œโ”€โ”€โ”€PixelVibe # Main Project Directory โ”‚ โ”œโ”€โ”€โ”€home # Project Main App Directory โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€migrations # Migrations โ”‚ โ”œโ”€โ”€โ”€static | | # Static Directory โ”‚ โ””โ”€โ”€โ”€| โ”‚ โ”œโ”€โ”€โ”€assets # Image Files | | โ”‚ โ”œโ”€โ”€โ”€css # CSS Files | | | โ”œโ”€โ”€โ”€fonts # Fonts Used โ”‚ โ”‚ | โ”œโ”€โ”€โ”€JS # js Files โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€โ”€favicons # favicons โ”‚ | โ”‚ โ”‚ | โ”œโ”€โ”€โ”€templates # Root Template Directory (all html templates) | โ”œโ”€โ”€โ”€db.sqlite3 # Database File | โ”œโ”€โ”€โ”€manage.py # For running django server | โ”œโ”€โ”€โ”€requirements.txt # All modules which are used in project ``` ## ๐Ÿš€ Quick Start : #### Step 1: Forking the repository : To work on an open-source project, you will first need to make your copy of the repository. To do this, you should fork the repository and then clone it so that you have a local working copy. Get your own Fork/Copy of repository by clicking `Fork` button right upper corner.

#### Step 2: Clone the Forked Repository After the repository is forked, you can now clone it so that you have a local working copy of the codebase. To make your local copy of the repository follow the steps: - Open the Command Prompt - Type this command: ```bash $ git clone https://github.com//pixelvibe ``` #### Step 3: Creating a new branch (IMP) This is one of the very important step that you should follow to contribute in Open Source. A branch helps to manage the workflow, isolate your code and does not creates a mess. To create a new branch: ```bash $ git branch $ git checkout -b ``` Keep your cloned repo upto date by pulling from upstream (this will also avoid any merge conflicts while committing new changes) ```bash git pull origin main ``` #### Step 4: Setting up Project ##### For Django: **1. Create a Virtual Environment** - *On macOS and Linux:* ```bash python3 -m venv env ``` - *Windows* ```bash py -m venv env ```` **2. Activate the Virtual Environment** - *On Windows* ```bash .\env\Scripts\activate ``` - *On macOS and Linux:* ```bash source env/bin/activate ``` **3. Install dependencies using** ```bash pip install -r requirements.txt ``` **4. Make Migrations** ```bash python manage.py makemigrations python manage.py migrate ``` **5. Run Server** ```bash python manage.py runserver ``` **6. Create admin** ```bash python manage.py createsuperuser ``` **5.** Go to ` http://127.0.0.1:8000/` and enjoy the application. #### Step 5: Contribute Make relevant changes according to the issue that you were assigned on. Contribute in any way you feel like :) #### Step 6: Commiting and Pushing Once you have modified an existing file or added a new file to the project, you can add it to your local repository, which we can do with the git add command. ```bash git add . ``` With our file staged, weโ€™ll want to record the changes that we made to the repository with the git commit command. The commit message is an important aspect of your code contribution; it helps the other contributors fully understand the change you have made, why you made it, and how significant it is. ```bash git commit -m "useful commit message" ``` At this point you can use the git push command to push the changes to the current branch of your forked repository: ```bash git push origin ``` #### Step 7: Create Pull Request Now, you are ready to make a pull request to the original repository. You should navigate to your forked repository, and press the "Compare & pull request" button on the page. GitHub will alert you that you can merge the two branches because there is no competing code. You should add in a title, a comment, and then press the โ€œCreate pull requestโ€ button. ## โš™ Contributing Guidelines Please go through the Contributing guidelines here. ## ๐Ÿ“– Code Of Conduct You can find the Code of Conduct here. ### โœ…  PEP8 Standards to be followed - Please follow the guidelines of PEP8 as given in here. ### โœ…  Pycode style to be followed - Please follow the guidelines of python module pycodestyle as given in here.

Project Admin โค๏ธ


Ankita Puri

Mentor


Adarsh Vulli


Arpit Jain

### ๐Ÿš€ Contributing This repository is contribution friendly. If you would like to add or improve, your contribution is welcome! Do not forget to follow [Contribution Guidelines](Contributing.md) and [Code of Conduct](CODE_OF_CONDUCT.md) ๐Ÿ˜ƒ ## ๐Ÿ“˜  License The PixelVibe is released under the under terms of the [MIT License](LICENSE). ## Open Source Program(s) This project is a part of GSSOC 2021. This project is a part of SWOC 2021. [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/built-by-developers.svg)](https://forthebadge.com) show some โค๏ธ  by giving the star to this repo