GithubHelp home page GithubHelp logo

garimasingh128 / hacktoberfest2020-moviedo Goto Github PK

View Code? Open in Web Editor NEW
83.0 1.0 265.0 36.41 MB

🤪 🤨 🧐 🤓 😎 HACKTOBERFEST 2020 ALERT: Submit Just 4 PRs to earn SWAGS 🤪 🤨 🧐 🤓 😎 Make your first PR! ~ A beginner-friendly repository made specifically for open source beginners.

Home Page: https://moviedo.netlify.app

License: Other

HTML 29.78% CSS 23.67% JavaScript 35.20% SCSS 11.36%
hacktoberfest 2020 hacktoberfest2020 react movies review json moviedo website star

hacktoberfest2020-moviedo's Introduction

MovieDo🧙🏻‍♂️ 🧙🏻‍♀️ "Get movie reviews at a click 🎯"

Author License Platform Maintained GitHub issues

A responsive movie review website 👼🏻"MovieDo"👼🏻 using JSON files & React.


🎯 If you are a beginner, and looking for your first contribution, we are here to help. Just append your favorite movie, its rating and its short description in our https://github.com/garimasingh128/Hacktoberfest2020-MovieDo/tree/master/src/data/data.json and that counts as your first PR. 🎯

Just 5 simple steps to earning your t-shirt for Hacktoberfest 2020 🧑🏻‍🤝‍🧑🏻

  1. 🎯Open the src/data/data.json file in your code editor of choice.
  2. 🎯Add another json object in the same format of your favourite movie
  3. 🎯Save your changes.
  4. 🎯The movie card will appear on your homepage at http://localhost:8000!
  5. 🎯Done! Ready to create your pull request?

Features 💪🏼

  • Uses Bulma CSS.
  • Minimalist Design.
  • 100% Responsive
  • Complete separation of data & code.
  • View it live

Contributing to Hacktoberfest 2020 👨🏼‍💻

Open source is changing the world - one pull request at a time. 🧑🏼‍🚀 Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the 2020 challenge and earn a limited edition T-shirt.
🙅🏼‍♂️Hacktoberfest is open to everyone in our global community. Whether you’re new to development, a student, long-time contributor, event host, or company of any size, you can help drive growth of open source and make positive contributions to an ever-growing community. All backgrounds and skills levels are encouraged to complete the challenge.🙅🏼‍♂️

💻 Also, our website is open to contributions from both frontend and designer fellows who want to help us in making it bigger and better.

💻 Make all Pull requests to the "develop" branch only. Let's maintain a stable master branch that is deployed. Changes would be merged later on to the master branch.

Instructions: 🙅🏼 🙅🏼‍♂️

1. 👇🏻Register yourself for Hacktoberfest 2019

2. 👇🏻Getting Started

Move to Instructions by clicking on the
START CONTRIBUTING
button

Read the Instructions and click Done at the end to move to the repository or click here to head to the repository.

3. 👇🏻Star and Fork this Repository

You can star ⭐ and fork 🍽️ this repository on GitHub by navigating at the top of this repository.
GitHub repository URLs will reference both the username associated with the owner of the repository, as well as the repository name.
When you’re on the main page for the repository, you’ll see a button to "Star" and “Fork” the repository on your upper right-hand side of the page, underneath your user icon.

3. 👇🏻Clone the Repository

To make your own local copy of the repository you would like to contribute to, let’s first open up a terminal window.
We’ll use the git clone command along with the URL that points to your fork of the repository.
This URL will be similar to the URL above, except now it will end with .git. In the example above, the URL will look like this:

https://github.com/your-username/Hacktoberfest2020-MovieDo.git

You can alternatively copy the URL by using the green “Clone or download” button from your repository page that you just forked from the original repository page. Once you click the button, you’ll be able to copy the URL by clicking the binder button next to the URL.
Once we have the URL, we’re ready to clone the repository. To do this, we’ll combine the git clone command with the repository URL from the command line in a terminal window:

git clone https://github.com/your-username/Hacktoberfest2020-MovieDo.git

4. 👇🏻Create a New Branch

To create your branch, from your terminal window, change your directory so that you are working in the directory of the repository. Be sure to use the actual name of the repository (i.e. Hacktoberfest2020-MovieDo) to change into that directory.
cd Hacktoberfest2020-MovieDo
Now, we’ll create our new branch with the git branch command. Make sure you name it descriptively so that others working on the project understand what you are working on.
git branch new-branch
Now that our new branch is created, we can switch to make sure that we are working on that branch by using the git checkout command:
git checkout new-branch
Once you enter the git checkout command, you will receive the following output:
Output:
Switched to branch 'new-branch'
At this point, you can now modify existing files or add new files to the project on your own branch.
Make sure you have read the contributing.md before you start contributing such that you make remarkable and easily acceptable PRs.

Make Changes Locally. For ex-

CAUTION: JSON files follow a certain format, do not forget to add a comma before you start editing your block and it's good if you append a comma after finishing your block.

Also, if you are interested in making intermediate or advanced level contributions, head to our intermediate section and make your mark.

Once you have modified existing files or added new files to the project, you can add them to your local repository, which you can do with the git add command. Let’s add the -A flag to add all changes that we have made:
git add -A or git add .
Next, 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. Additionally, commit messages provide a historical record of the changes for the project at large, helping future contributors along the way. Thus, you must ensure that you write a meaningful commit message. If in a confusion, refer to the good contribution guidelines included in the ##### contributing.md
If you have a very short message, you can record that with the -m flag and the message in quotes:
Example:
git commit -m "Updated Readme.md"
At this point you can use the git push command to push the changes to the current branch of your forked repository:
Example:
git push --set-upstream origin new-branch

5. 👇🏻Update Local Repository

While working on a project alongside other contributors, it is important for you to keep your local repository up-to-date with the project as you don’t want to make a pull request for code that will cause conflicts. To keep your local copy of the code base updated, you’ll need to sync changes.
We’ll first go over configuring a remote for the fork, then syncing the fork.

6. 👇🏻Configure a Remote for the Fork

Next, you’ll have to specify a new remote upstream repository for us to sync with the fork. This will be the original repository that you forked from. you’ll have to do this with the git remote add command.
git remote add upstream https://github.com/garimasingh128/Hacktoberfest2020-MovieDo
In this example, // upstream // is the shortname we have supplied for the remote repository since in terms of Git, “upstream” refers to the repository that you cloned from. If you want to add a remote pointer to the repository of a collaborator, you may want to provide that collaborator’s username or a shortened nickname for the shortname.

7. 👇🏻Sync the Fork

Once you have configured a remote that references the upstream and original repository on GitHub, you are ready to sync your fork of the repository to keep it up-to-date.
To sync your fork, from the directory of your local repository in a terminal window, you’ll have to use the // git fetch // command to fetch the branches along with their respective commits from the upstream repository. Since you used the shortname “upstream” to refer to the upstream repository, you’ll have to pass that to the command:
git fetch upstream
Switch to the local master branch of our repository:
git checkout master
Now merge any changes that were made in the original repository’s master branch, that you will access through your local upstream/master branch, with your local master branch:
git merge upstream/master

8. 👇🏻Create Pull Request

At this point, you are ready to make a pull request to the original repository. Make PRs' to the develop branch only!
Now navigate to your forked repository, and press the “New pull request” button on your left-hand side of the page.

👑 👑 Hurray!!! You just got closer to completing your hacktoberfest challenge. 😃

Happy?? Star ⭐ this Repo. 🤩

🎩 Check your Hacktoberfest Contribution status at: 🙅🏼‍♂️

https://hacktoberfest.digitalocean.com/profile

ForTheBadge uses-git ForTheBadge uses-html ForTheBadge uses-css ForTheBadge uses-js

Open Source Love  Voila!

Deploy with Netlify 👓

The project can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. Use the button below to build and deploy your own copy of the repository: 🙅🏼‍♂️

Deploy to Netlify

  1. 👓After clicking that button, you’ll authenticate with GitHub and choose a repository name.
  2. 👓Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template.
  3. 👓It will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete.

👬 Owner


Garima Singh

👩‍🎓 Junior | 💻 Aspiring Software Developer | 📲 Shipping code since 2018 | Open-Source Mentor 💜 | DevRel 🌤️

🙅🏼‍♂️ License 🗣

The MIT License (MIT)

Copyright (c) 2020 Garima Singh MovieDo

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

🤪 🤨 🧐 🤓 😎 Thanks to our awesome contributors 🤪 🤨 🧐 🤓 😎

hacktoberfest2020-moviedo's People

Contributors

dcox2016 avatar garimasingh128 avatar mrinal4 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  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

hacktoberfest2020-moviedo's Issues

Inappropriate star bar

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
The bar of the star is overflowing

  1. Click on 'live website'
  2. Scroll down to 'movie cart'
  3. See error

Expected behavior
a bar in which star contain should be appropriate size.

Screenshots
Screenshot_20200927-180105_Samsung Internet

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Add your own favourite movies to the website.

Just 5 simple steps to earning your t-shirt for Hacktoberfest 2020 🧑🏻‍🤝‍🧑🏻

🎯Open the src/data/data.json file in your code editor of choice.
🎯Add another json object in the same format of your favourite movie
🎯Save your changes.
🎯The movie card will appear on your homepage at http://localhost:8000!
🎯Done! Ready to create your pull request?

Create all your pull requests to develop branch only!

Background and Alignment of footer section

Describe the bug
Background is not present in footer section and unalignment of footer content i.e it is in extreme left.

To Reproduce
Steps to reproduce the behavior:

  1. Go to live website
  2. Scroll down to footer section
  3. See error

Expected behavior
Background should be according to description in readme file i.e dark blue.
Alignment of content should be at center

Screenshots
If applicable, add screenshots to help explain your problem.
Screenshot_20200925-050416_Samsung Internet

Desktop (please complete the following information):

  • OS: Windows
  • Browser : Google Chrome
  • Version : 10

Smartphone (please complete the following information):

  • Device: Samsung Galaxy M30s
  • OS: Android 10.0 (Q) with One UI 2.0
  • Browser : Samsung Internet
  • Version : Android 10

Additional context
Add any other context about the problem here.

The read me update

Is your feature request related to a problem? Please describe.
The new layout looks different than the one shown. Need someone to run the app and update the image in the read me.

Describe the solution you'd like
The layout was updated to fix the issue with smaller screens

Describe alternatives you've considered
Leave the old image and confused new developers

Additional context
Just npm install and npm run. Than grab a shoot of the app in the browser.

Enola Holmes Movie review

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

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

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Add the favicon

Create and add favicon for your website which will make it more spectacular.

Layout breaks for screen-size > 576px

Describe the bug
For small screen sizes (particularly mobiles), responsiveness works fine, but for screens of greater sizes, the view breaks into a grid of 3 columns which doesn't look good.

To Reproduce
Steps to reproduce the behavior:

  1. Open up inspect/console
  2. Reduce the screen size and check the responsiveness for smaller screen sizes

Expected behavior
For screen sizes (like tabs), the grid should contain 2 columns, and for greater sizes, it should expand to 3 columns.

Screenshots
Screenshot 2020-10-05 at 8 22 43 PM

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Chrome
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Assign me this issue and I'll fix it.

Enhancement of header section.

Enhance the header of the website:

  • add a better logo
  • better color combinations
  • any other enhancement like image or gifs.

.

.

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.