From 65f6d12f6e3396649ae8ee838d4b7b9ed0a7f6e1 Mon Sep 17 00:00:00 2001 From: Auraofdivinity Date: Mon, 24 Feb 2020 17:10:48 +0530 Subject: [PATCH 1/3] donut-frontend-docs --- .../donut-frontend/ about.md | 25 ++++++ .../donut-frontend/README.md | 17 +++++ .../Setting-up-the-donut-webapp-locally.md | 56 ++++++++++++++ .../donut-frontend/code-of-conduct.md | 76 +++++++++++++++++++ .../contributing-to-donut-frontend.md | 61 +++++++++++++++ .../setting-up-the-work-environment.md | 31 ++++++++ 6 files changed, 266 insertions(+) create mode 100644 donut-docs/donut-documentation/donut-frontend/ about.md create mode 100644 donut-docs/donut-documentation/donut-frontend/README.md create mode 100644 donut-docs/donut-documentation/donut-frontend/Setting-up-the-donut-webapp-locally.md create mode 100644 donut-docs/donut-documentation/donut-frontend/code-of-conduct.md create mode 100644 donut-docs/donut-documentation/donut-frontend/contributing-to-donut-frontend.md create mode 100644 donut-docs/donut-documentation/donut-frontend/setting-up-the-work-environment.md diff --git a/donut-docs/donut-documentation/donut-frontend/ about.md b/donut-docs/donut-documentation/donut-frontend/ about.md new file mode 100644 index 0000000..da33ffa --- /dev/null +++ b/donut-docs/donut-documentation/donut-frontend/ about.md @@ -0,0 +1,25 @@ +# About + +Being inspired by the Cornucopia of various social hub this project has been developed taking into consideration about open source. + +Well, this is an Open Source Social networking hub which acts as a bridge between various Developers, Organisations and Open Source aspirants to elaborate on various things like \#Projects, \#Events, \#Discussion on various researches, \#Scholarships, \#Coding release and various other things updates. + +The major priority of this project has been that this platform allows users to make their project "Open Sourced" and released them under various open source Organisations, experts which hold up a ring plate on this portal. + +This platform also makes users introduce and develops various solutions in the form of FOSS software to publish them for public use by integrating them with their social cause. Moreover, this project can be downloaded by any user, organization and can be used by them in their own custom way, making it run on their servers. + +## Technology Stack + + - CSS: Styling web pages, html files +- Javascript: Primary programing language +- ReactJS: Javascript library for building User Interfaces + + +## Communication + + - Slack - [Click here to join the codeuino slack channel](slack.codeuino.org) + + + + +​ diff --git a/donut-docs/donut-documentation/donut-frontend/README.md b/donut-docs/donut-documentation/donut-frontend/README.md new file mode 100644 index 0000000..ad21da2 --- /dev/null +++ b/donut-docs/donut-documentation/donut-frontend/README.md @@ -0,0 +1,17 @@ +--- +description: This contains documentation related to frontend part of Social Platform Donut +--- + +# Donut Backend + +## Table of Contents + +{% page-ref page="about.md" %} + +{% page-ref page="setting-up-the-work-environment.md" %} + +{% page-ref page="Setting-up-the-donut-webapp-locally.md" %} + +{% page-ref page="contributing-to-donut-frontend.md" %} + +{% page-ref page="code-of-conduct.md" %} diff --git a/donut-docs/donut-documentation/donut-frontend/Setting-up-the-donut-webapp-locally.md b/donut-docs/donut-documentation/donut-frontend/Setting-up-the-donut-webapp-locally.md new file mode 100644 index 0000000..6824f75 --- /dev/null +++ b/donut-docs/donut-documentation/donut-frontend/Setting-up-the-donut-webapp-locally.md @@ -0,0 +1,56 @@ +# Setting up the donut frontend potion locally. + + **Forking The Repository** + +The first step of setting the donut frontend locally is to fork the original repository. This creates a copy of that repository under your own account enabling you to begin working with the code. The rights to public repositories will be such that you can view the code, but not directly commit into the repository or create branches. This allows the project owners to control changes within their codebase. + +The forking step creates a copy to which you do have permission to commit and branch on and you can consider this your working copy of the project. You can make changes and commits here, safe in the knowledge that you will not affect the main repository. + +In order to fork the donut frontend repository visit [here](https://github.com/codeuino/social-platform-donut-frontend) + +![](https://i.imgur.com/bWLML1u.png) + +**Cloning the forked repository** + +In order to clone the forked repository visit fork of the donut repository under "your repositories" section and click on the “Clone or download” which will open a UI showing the Git URL. A button to the right hand side of the URL allows you to copy it into your clipboard. + +![](https://i.imgur.com/2UyN3KV.png) +There are various graphical tools you can use to work with Git repositories but for simple procedures, the command line is often fastest. + +Open a command window and navigate to the path where you would like to clone the repository. +Use the following command to begin a clone: +``` +git clone https://github.com//social-platform-donut-frontend.git +``` +Once the command completes you will have a new folder containing the cloned repository. We can validate this by running the “dir” command. We can then move into that directory using the "cd " command. + +![image of command line](https://i.imgur.com/QsQy4Sg.png) + +**Setting up a remote upstream** + +The next step is to set up a remote. Remotes simply represent paths or URLs to other versions of your repository. In our case, as we cloned from our fork on GitHub a default remote will have been setup for us called origin. This origin allows us to push and pull code from our forked repository hosted on GitHub. We can list the currently configured remotes on our machine using the “git remote” command. + +Pushing and pulling from your own fork is very useful and this will be how you will work with the project most often. However, when working on that code, you’ll want to be starting from the most recent version of the code from the main donut-frontend repository. That code may have been updated and changed since you first made your fork. In order to get access to that latest code, we’ll setup a second remote which points to the main donut-frontend repository. We will not have commit rights there, so we cannot push changes, however, we will be able to fetch the latest commits that have occurred. + +To create a new remote we use the “git remote add” command, passing in a name for the new remote and the URL as arguments. In our case since we want the second remote to point towards the original donut-frontend repository we will use the follwing command. It's possible to name the remote anything you like, but the convention is to name it "upstream". + +``` +git remote add upstream https://github.com/codeuino/social-platform-donut-frontend.git +``` + +**Installing the dependencies and running our local version of donut-frontend** + +The next step is to install the required dependencies to our newly created donut-frontend app. This could be done by running the following command in the terminal. + +``` +npm install +``` + +The npm install command will install all the project dependencies mentioned in the package.json file. +Once all the dependencies are completely installed the final step is to run our local instance using the following command. + +``` +npm start +``` + +Now visit the [http://localhost:3000](http://localhost:3000) using your favorite browser to see your very own donut-frontend app in action! \ No newline at end of file diff --git a/donut-docs/donut-documentation/donut-frontend/code-of-conduct.md b/donut-docs/donut-documentation/donut-frontend/code-of-conduct.md new file mode 100644 index 0000000..3861a37 --- /dev/null +++ b/donut-docs/donut-documentation/donut-frontend/code-of-conduct.md @@ -0,0 +1,76 @@ +# Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at codeuino@gmail.com. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq diff --git a/donut-docs/donut-documentation/donut-frontend/contributing-to-donut-frontend.md b/donut-docs/donut-documentation/donut-frontend/contributing-to-donut-frontend.md new file mode 100644 index 0000000..ac2d2e4 --- /dev/null +++ b/donut-docs/donut-documentation/donut-frontend/contributing-to-donut-frontend.md @@ -0,0 +1,61 @@ +# Contributing to the donut frontend. + +**Choosing an issue** + +The first step when contributing to donut-frontend is to visit the project site and find an issue you would like to work on and which you think is suitable for your skill set. From the project homepage on GitHub you can click the Issues tab to navigate to a list of the open issues. + + +![enter image description here](https://i.imgur.com/ncLCy84.jpg) +After chosing an issue from the issues tab click on that particular issue to view more details about it. The issue details page provides the full information about the issue. Usually the top comment will include details of the bug or the feature that is needed. Issues can be raised by anyone and as a result, the level of detail may not always be sufficient to understand the problem or requirement. On allReady, the project owners and core contributors try to view new issues and triage them. This involves verifying the issue being reported is valid and where necessary, providing some further details or guidance. If it’s not clear what is needed from an issue, you can leave a comment to ask questions about it. If you have an idea for a solution, but want to run it past the project team before starting, work, you can leave a comment for that too. Issues are a good place for open discussions like this. + + +**Working on an issue** + +When beginning work on an issue locally, the first thing you’ll need to do is to create a branch for that piece of work. There are many Git UI tools that allow you to create a branch, for this demo we’ll use the command line. To create and checkout a branch you can use a single command. + +``` +git checkout -b +``` + +This command allows us to specify a name for our new branch and immediately check it out so we can work on it. It's common to name the branch with the issue number. For exmaple if we are working on the issue #223 it would be a good idea to name the branch, + + +``` +git checkout -b 223 +``` + +Once we are on our new branch we can make changes to the code which address the issue. When we have made the required changes that address a particular issue, we need to commit that code to our branch. We can use the “git status” command to view the changes since our last commit. + +``` +git status +``` + + +We then use the “git add” command to stage the changes for the next commit. It's possible to add the files one by one by spcifying their relative path afterwards. For example if we want to add the corrections.js file in the same directory, + +``` +git add corrections.js +``` + +However if you want to stage all the files that have been changed, it's also possible with the follwing command. +``` +git add . +``` +Next we will commit our staged changes using the “git commit” command. In this case we can use the following example: +``` +git commit -m "Fix readme typo" +``` + +The -m option allows us to specify a message for our commit. It’s good practice to try and provide a succinct, but descriptive message for your commits. This helps a reviewer understand at a high level what was addressed in each commit. + +At this point we have made and committed out changes local to our development machine. Our final step is to push the changes to our fork of the allReady repository up on GitHub. We can do that using the “git push” command. We need to specify the name of the remote that we want to push to and the name of the branch we want to push up. + ``` + git push origin 223 + ``` + +Now the changes we have made are pushed into our fork in GitHub. The final step is to make a pull request . A **pull request** (PR) is a method of submitting contributions to an open development project. It occurs when a developer asks for changes committed to an external repository to be considered for inclusion in a project's main repository after the peer review. + +In order to make a pull request, visit the forked repository on github. On the top right hand side a button will now be there mentioning that a pull request is ready to be made. + +![enter image description here](https://i.imgur.com/bTN9On5.jpg) +Click on the "compare and pull request" button to make the pul request! \ No newline at end of file diff --git a/donut-docs/donut-documentation/donut-frontend/setting-up-the-work-environment.md b/donut-docs/donut-documentation/donut-frontend/setting-up-the-work-environment.md new file mode 100644 index 0000000..bfb3b67 --- /dev/null +++ b/donut-docs/donut-documentation/donut-frontend/setting-up-the-work-environment.md @@ -0,0 +1,31 @@ +# Setting up the work environment. + +Few things are required before setting up the project locally, + + - **A Web Browser** - You can install any browser as per your preference e.g. Internet Explorer,Chrome, FireFox, Safari, Opera etc. JavaScript works on any web browser on any OS. + - **An Editor**- We prefer an editor which has built-in features of IntelliSense support and syntax error highlighter for speedy development. Download Visual Studio Code from [here](https://code.visualstudio.com/download). + - **Node and Node Package Manager(NPM)** + Check if node and npm are already installed by running the following commands in the terminal + ``` + node -v + npm -v + ``` +If not install it in, + - **Windows & MacOS** + + Installing Node and NPM on Windows and macOS is straightforward because you can just use the provided installer: + Go to https://nodejs.org/en/ + Select the button to download the LTS build that is "Recommended for most users". + Install Node by double-clicking on the downloaded file and following the installation prompts. + + - **Ubuntu** + The easiest way to install the most recent LTS version of Node 10.x is to use the [package manager](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions) to get it from the Ubuntu _binary distributions_ repository. This can be done very simply by running the following two commands on your terminal: + ``` + curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - + sudo apt-get install -y nodejs + ``` + + + + + From e71129501ff3bcacea915497e779b401a9761df4 Mon Sep 17 00:00:00 2001 From: Auraofdivinity Date: Wed, 4 Mar 2020 16:01:10 +0530 Subject: [PATCH 2/3] requested changes --- .../donut-frontend/README.md | 4 +++- .../donut-frontend/design.md | 23 +++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 donut-docs/donut-documentation/donut-frontend/design.md diff --git a/donut-docs/donut-documentation/donut-frontend/README.md b/donut-docs/donut-documentation/donut-frontend/README.md index ad21da2..52ffcd9 100644 --- a/donut-docs/donut-documentation/donut-frontend/README.md +++ b/donut-docs/donut-documentation/donut-frontend/README.md @@ -2,7 +2,7 @@ description: This contains documentation related to frontend part of Social Platform Donut --- -# Donut Backend +# Donut Frontend ## Table of Contents @@ -14,4 +14,6 @@ description: This contains documentation related to frontend part of Social Plat {% page-ref page="contributing-to-donut-frontend.md" %} +{% page-ref page="design.md" %} + {% page-ref page="code-of-conduct.md" %} diff --git a/donut-docs/donut-documentation/donut-frontend/design.md b/donut-docs/donut-documentation/donut-frontend/design.md new file mode 100644 index 0000000..c565a1e --- /dev/null +++ b/donut-docs/donut-documentation/donut-frontend/design.md @@ -0,0 +1,23 @@ +# Design + +User interface is created mainly using Bootsrap. However in the near future styling will be moved to the react material ui framework. + +## Sign Up page + +![enter image description here](https://image.prntscr.com/image/E98J06eYSU_lAryPogLdDw.png) + +## Login page + +![enter image description here](https://image.prntscr.com/image/_TbBhIylRQm7oLpZY8TT6A.png) + +## Dashboard page + +![enter image description here](https://image.prntscr.com/image/-bfVNQCORruJrsYxZjrkWA.png) + +## Pinned Posts + +![enter image description here](https://image.prntscr.com/image/VUl5DsX8RnitJHepLHJX1g.png) + +## Profile as viewed by ourselves + +![enter image description here](https://image.prntscr.com/image/LbYQQ9znQ-_pas0xJUeEhw.png) From 8dbd9f10ecaeb007ed915c9223691b0bc0b566b3 Mon Sep 17 00:00:00 2001 From: Auraofdivinity Date: Wed, 4 Mar 2020 16:07:00 +0530 Subject: [PATCH 3/3] minor changes --- .../donut-documentation/donut-frontend/ about.md | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/donut-docs/donut-documentation/donut-frontend/ about.md b/donut-docs/donut-documentation/donut-frontend/ about.md index da33ffa..2c99c23 100644 --- a/donut-docs/donut-documentation/donut-frontend/ about.md +++ b/donut-docs/donut-documentation/donut-frontend/ about.md @@ -10,16 +10,13 @@ This platform also makes users introduce and develops various solutions in the f ## Technology Stack - - CSS: Styling web pages, html files -- Javascript: Primary programing language -- ReactJS: Javascript library for building User Interfaces - +- CSS: Styling web pages, html files +- Javascript: Primary programing language +- ReactJS: Javascript library for building User Interfaces +- Bootstrap: Styling framework. ## Communication - - Slack - [Click here to join the codeuino slack channel](slack.codeuino.org) - - - +- Slack - [Click here to join the codeuino slack channel](slack.codeuino.org) ​