Giter Site home page Giter Site logo

ankitapuri / pixelvibe Goto Github PK

View Code? Open in Web Editor NEW
43.0 2.0 95.0 11.86 MB

This a Pixel-art maker with add-on features.

License: MIT License

JavaScript 35.18% CSS 18.64% HTML 36.31% Python 9.87%
pixel-art html5 css3 javascript front-end-development django bds

pixelvibe's Introduction

Number of Contributors Issues opened Issues closed PRs open PRs closed Repo size

📋 Description

PixelVibe is a pixel-art maker which is mainly made for the creative art lover in you 😃

Demo 🎥

PixelVib
PixelVib

✅  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
  1. Signin / sign up page
  2. Forgot password feature
  3. 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:
$ git clone https://github.com/<your-github-username>/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:

$ git branch <name_of_branch>
$ git checkout -b <name_of_branch>

Keep your cloned repo upto date by pulling from upstream (this will also avoid any merge conflicts while committing new changes)

git pull origin main

Step 4: Setting up Project

For Django:

1. Create a Virtual Environment

  • On macOS and Linux:
      python3 -m venv env
  • Windows
      py -m venv env

2. Activate the Virtual Environment

  • On Windows
    .\env\Scripts\activate
  • On macOS and Linux:
    source env/bin/activate

3. Install dependencies using

pip install -r requirements.txt

4. Make Migrations

  python manage.py makemigrations
  python manage.py migrate

5. Run Server

  python manage.py runserver

6. Create admin

  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.

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.

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:

git push origin <branch-name>

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 and Code of Conduct 😃

📘  License

The PixelVibe is released under the under terms of the MIT License.

Open Source Program(s)

This project is a part of GSSOC 2021.

This project is a part of SWOC 2021.

forthebadge forthebadge

show some ❤️  by giving the star to this repo

pixelvibe's People

Contributors

7saikat7 avatar aashishah avatar adarshvulli avatar aditisneh avatar alik-kumar-ghosh avatar ankitapuri avatar arpit456jain avatar ashukv avatar atharvakamble avatar avinal avatar cryptofox17 avatar deek121477 avatar fomalhauting avatar gitter-badger avatar gnikita432 avatar hritikgupta92 avatar kanak22 avatar n-shar-ma avatar pratibha-rawat avatar rohan-kulkarni-25 avatar rupal11 avatar saatviknagpal avatar shaima-haque avatar shairanshrawat avatar shrishti-c avatar silvergraph avatar snehaveerakumar avatar subhamgcon avatar subhangi2731 avatar swarnalii avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

pixelvibe's Issues

Adding a Homepage

Screenshots
If applicable, add screenshots to help explain your problem.
I would like to add a homepage to this website that describes the purpose and a few other details about this website.
we can also add a navbar that can contain links which can be routed.
(Prefer to use React.js)

Integrate welcome bot

Screenshots
If applicable, add screenshots to help explain your problem.
I would like to add welcome bot for first issue, first pull request, etc.
Kindly assign it to me under gssoc. Thank you

Best practices TODO

Code

  • Proper readable and maintable code with consistent spacing and indentation
  • Functions follow the "Do One Thing" rule (single-responsibility)
  • Followed DRY (Don’t Repeat Yourself)
  • Added comments wherever required
  • Proper naming conventions
  • Avoided deep nesting

Readme

  • Badges (similar to the Gitter badge. You can maybe use: https://shields.io/)
  • Description (why this project exists)
  • Features (working of the project)
  • Setup (Quick start instructions with how to download and use your project)
  • Contributing (How can others contribute?)
  • License ("This project is licensed under the ")

Tests and CI/CD

  • Wrote tests
  • Deployed the project (if possible)
  • Added CI/CD tools to your project (maybe CircleCI or TravisCI) (if possible)

Bug In Changing Light mode to Dark Mode in Login/Signup Page

Light Mode is ok but when i switched to dark mode It creates a problem because i am not able to see the content written in form because it is of black color.

It should change to White color when dark mode is activated and change to black color when light mode is activated I am attaching a video for better understanding my issue

2021-03-21.17-43-04.mp4

Please assign me this issue as i am a gssoc'21 participant and i would love to work on it.

Logo Design

I'd like to create a professional logo for the website, something that goes with the theme.

I'd like to work on this under GSSOC'21, so if you approve of the issue please assign it to me. Thank you :)

Adjust the toggle button

Screenshots
If applicable, add screenshots to help explain your problem.

Make the bulb in the toggle button on login page stable and fixed at one position in both light and dark mode .

Index page is not responsive

Screenshots
If applicable, add screenshots to help explain your problem.
pxissue3
I can make the index page responsive , can you please assign me this issue under gssoc21

Change the font-family and styling the input boxes

enhancing its styling by changing the font-family and styling the input boxes(like increasing some width and adding shadows and radius)
i1
i2
I am a GSSOC'21 participant. Please assign me this issue under GSSOC

[Gssoc'21] Backend in Django or flask

I am a gssoc'21 participant and I want to contribute in this project by writing its backend in python either flask or Django.
I will also write its login and sign up functionality.

Add the labels in the Readme.md

Add labels in the Readme displaying

  • No of contributors
  • Issues opened
  • Issues closed
  • PRs open
  • PRs closed
  • Repo Size
  • Built By developers
  • Built with Love

Unable to scroll and bottom padding

This issue is related to unable to scroll and the bottom padding to last grid.

I am a GSSOC'21 participant please assign this issue to me i would like to in this issue.

Screenshots

image

Adding a Clear Canvas Button

Adding a Button to clear the canvas so that the user can start over drawing without having to refresh the page.
It could be implemented using javascript. I would like to work on this issue

update contributing.md

Hey! I would like to add the following in contributing.md
1.Difference between GIT and GITHUB
2.How to clone,fork repository
3.How to create a branch and then use git push to push to repo
4.Create a PR
5.Squash commits in a single issue into one
6, Updating the forked and local repo as the updations are made in the upstream
I would like to work on this issue as a part of GSSOC'21

project cover design

Create a design for the readme. md

Size: width=200 height=400

Theme: pixel-art in sync to the pixel vibe

update contributing.md

Hey! I would like to add the following in contributing.md
Add the following -

1.Difference between GIT and GITHUB
2.How to clone,fork repository
3.How to create a branch and then use git push to push to repo
4.Create a PR
5.Squash commits in a single issue into one
6, Updating the forked and local repo as the updations are made in the upstream
I would like to work on this as a part of GSSOC'21

Adjust the board size according to the user choice

Screenshots
If applicable, add screenshots to help explain your problem.

The form should be able to take user input and when we press submit button the canvas takes the size according to the user preference and the need .

Adding a drawing section/area to the page

We can make a main drawing section to the index.html, so as soon as the user starts and enters the grid dimensions, the (pop-up) form disappears and a canvas appears of the submitted grid dimensions.
I'll start as soon as you assign this to me.

Imporoving grid visibility as per user input

I would like to solve the issue. When the user gives input to ow row and column, a table of the same number of rows and columns can be displayed as shown in a given figure.
Screenshot (1)

but when the user enters the number of rows more than 7, only 7 rows are displayed in a table as given below.
Screenshot (2)_LI

I would like to work on this problem as a GSSOC participant. kindly assign this issue to me. :)

Design the home page

I would like to make the following improvement on the home page:
*Add a header section that would comprise of options like start drawing and login/signup
*In the body section, give a short description of the website and few artworks made
*Add a start drawing button that will redirect the user to the pixel art page

enhancing readme

We need to depart our project objective and working , efficiently. For this we need better UI in readme also some contribution guidelines.

Tech Stack Update ( LOGO add )

I will like to add tech stack logo used in our project this will make our project attractive !! Will start to work on this issue as soon as i get assigned !!

To create a login page for users

It will be divided in 3 parts :

  • header (which will contain the name of the project and toggle button for light n dark mode )
  • main body ( where the user will have the option to signup/sign in using the mail address and password )
  • footer (mentioning made with love)

Add the utility box

I am a GSSOC'21 participant. I will like to add color picker and different pen and eraser sizes and also delete and undo button. Can you please assign this to me?

Creating forgot password page

I would love to create the forgot password for this page which will be directed after user clicks on forgot password option in login/signup page.

Adding a scroll bar to the home page

I would like to add a scroll bar to the home page as if the user enters 20 by 20 grid it isnt completely visible and there arent any ways to scroll down and see it. Kindly assign it to me as a part of GGSOC'21..

Screenshots
If applicable, add screenshots to help explain your problem.

Add favicon

Add favicon
I would like to add a favicon.Please /assign this to me as a part of GSSOC'21

Add an issue template

I would like to add an issue template for the project as a part of GSSOC'21. Kindly assign it to me.

Color contrast of Login Page

Screenshots
If applicable, add screenshots to help explain your problem.

Change the color contrast of login page in neuromorphic format for both dark and light mode.

🚀Feature: Add a download pixel art button

Currently, the project lacks the ability to download the art created by the user.
I would like to work on this issue to add a download art functionality to the project.

The download button will be placed below the canvas, and as soon as the user clicks on it. It will download the created art in either JPEG or PNG. Format

Kindly assign this issue to me under the GSSOC'21 program.

Thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.