-
Notifications
You must be signed in to change notification settings - Fork 12
Documentation
- Download Git bash to run git commands.
- Create a folder in your PC with the name ‘taskbarter.com’.
- Open git bash in that folder. (right click and select git bash). And then login to your github account using git bash.
- Now clone this git repository using the command:
$ git clone git@github.com:taskbarter/main.git - Now you’ve downloaded the repository.
- Go to ‘main’ folder. (
cd main) - Add some changes then run:
$ git add .$ git commit -m “some message you want to put”$ git push -u origin master - The above commands will push your changes to the live server.
If you face any errors, make sure you are logged into your account that is linked with the Taskbarter Github Organization.
If the problem persists, then probably, your directory is not correctly pointing the origin. Run this command:
git remote add origin git@github.com:taskbarter/main.git
Keep running this command to check your current status and where the master branch is headed.
git status
To pull the updated changes to your local machine, use this command.
git pull
Don’t worry, it won’t affect your changes. Make sure to add and commit before pulling. Everything else would be fine and saved. See here for the changes: https://github.com/taskbarter/main/commits/master
Proper way of adding some feature and working independently is to add Branch in your repository. This will make your changes saved separately in an independent branch. You’ll then be able to pull and push to your branch separately.
Create Branch:
git branch feature-name
Point to that branch:
git checkout feature-name
See available branches:
git branch -a
Push changes:
git push origin feature-name
- Once you’ve downloaded and cloned the files from github.com/taskbarter/main/ to your local directory, follow these steps.
- Make sure you’ve node installed in your PC. Download (https://nodejs.org/dist/v10.16.0/node-v10.16.0-x64.msi)
- Also install MongoDB in your PC.
- Now, in the main folder, run this command:
npm install - Then move on to ‘client’ folder and run this command:
npm install - Now move back to the main folder and run:
npm run dev - This will open the browser automatically in 1-2 minutes. If there’s some error, then you'll probably have to update your package.json file.
The server is hosted on Heroku.com and github.com simultaneously. The Heroku domain Taskbarter.herokuapp.com takes files from Github ‘main’ repository and runs ‘npm install’ and ‘npm run build’ and then ‘npm run dev’ automatically. Mongo is used for database storage. Node Modules are never uploaded to the server because they are mentioned in the .gitignore file. Clear your cookies and cache after deployment to see the changed effects. We are using Cloudflare for CDN purpose and it caches almost all the scripting and styling files. So make sure you clear your cache and cookies before you test the app.
Never add some infected code or huge change in the master branch directly. This will cause a huge problem. Make sure you work on a separate branch if you are coding a major feature. For minor features, you can add them directly.
To revert back the changes you’ve made, first see what commits have been made:
git log --oneline
Each commit will have a hash written on left. Move your head to it by using:
git checkout <commit hash>
To revert back the changes, using this command:
git revert <unwanted commit hash>
To fix detached head, use this command:
git checkout <current branch>
Never add Images with the build. The server is limited so we only can upload 500mb of data. Do not waste it with images. The build is already 80mb+. Heroku has some other limitations too, and one is that it stops working if there’s no activity on the website for 30 minutes. You can wake it up again by opening the website but it may show some errors or delay in page load. Just refresh and every thing will be fine.
Once you’ve written some code in your repository, the first thing you should do is to test it on your browser using the domain localhost:3000. Try all possible scenarios. To test the server side, make some routes and test them using Postman. Download postman here: https://www.getpostman.com/ You also have to test Production build in the app. In your ‘client’ folder, run this command: ‘npm run build’, this will render out static pages in ‘build’ folder inside client folder. Use this google extension, https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en to run your build. Just choose the folder ‘build’ in the web server and then open the specified IP address. Make sure to delete the build files after testing. They must not be pushed to the ‘master’ branch. Right click on the rendered page on chrome and open ‘inspect element’. See for any errors in the ‘console’ tab and try to resolve them. To check whether your APIs are working correctly or not, you can go to ‘network’ tab and see what calls were made and what were their response.
- Authenticate User /login takes two parameters in its request body. Username and password. Username can be replaced by Email too. It returns JWT token and username. /register takes in all the form information and redirects the user to login page.
Here is a great article to start with: https://www.toptal.com/nodejs/secure-rest-api-in-nodejs You must add security to your API’s.
We are using ReactJS for front-end implementation. Please watch one or two tutorials on React and then continue reading this.
Once you’ve tested the backend Rest APIs completely, you can then apply the frontend calls using Axios. Axios is an API calling library that takes in a request body and returns a response.
axios .post(url + '/api/[Your Route]', passData) .then(res => { // on success }) .catch(err => { // on error})
But do not do it in a component! Do it in actions instead.
React has a data store called Redux that ensures that the data is maintained in the client cache and can be shared across components. It has a life-cycle that needs to be practiced and learned.
Reducers
The reducers are data middlewares. You need to use reducers to make any change in states across components. Do not directly pass information, but use Reducers to ensure better performance and structure of the application. In the folder ‘client/src/reducers/’, you can find all the implemented reducers in the app. You can notice that each reducer takes just two parameters
- Old State
- Action Object Old state is simply the state that is currently being used in the component. Action object is an important part to understand. Each reducer has a set of conditions for each of the action type.
Defining New Reducer:
Create a new file in the folder ‘/client/src/reducers’. Make sure it ends with ‘Reducer.js’, for example ‘mohsinReducer.js’ etc. Define a constant on top of the file with the default state parameters that you want to send to a component. const initialState = {myName: ‘Mohsin’, myAge: 21}; Write a function that takes in the state parameter and an action. You don’t need to import any actions, you can just use the dispatch() to call that reducer later. Import related action types and write code for each of the action type. The return part of this function must be an object. It must contain the current state and parameters that you changed.
We must not call reducers from the components directly. We should instead call actions to dispatch reducers for us.
The app will not know about your reducer unless you specify about it in the ‘client/src/reducers/index.js’ file. The function combineReducers() exports the reducers collectively. So, mention your reducer or it will not work.
Just an FYI, the reducers folder is later imported in the ‘client/src/store.js’ file.
Actions
Actions are just methods. Actions call reducers to make changes in the app. Each action has a type and each of these types are conventionally stored separately in a file. In Taskbarter app, you have to write all the action types in the ‘client/src/actions/types.js’ file using the convention followed in the other types.
Writing a new action:
Create a new file in ‘client/src/actions/’ with a name ending with ‘Action.js’. For example, ‘nomiAction.js’. Import the action type you defined in ‘client/src/actions/types.js’ file. Now write a new action just like a new method.
export const actionName = (data) => { return (dispatch) => { // do something dispatch({ type: MY_ACTION, payload: newData }) } }
This will call the reducer with the action type ‘MY_ACTION’ in the reducer condition. React Components Make the components modular and consistently independent if possible.
Creating a new component:
Add a new folder only if you want to make a whole new feature or new page in ‘client/src/components’ folder. Add a new javascript file. Write basic code of the component like in the courses. You’ve to map your components state with the store using:
const mapStateToProps = state => ({ auth: state.auth, errors: state.errors });' export default connect(
mapStateToProps,
{ registerUser }
)(withRouter(Register));'
Lodash
Lodash is a utility library to add common programming functions in the program such as manipulating arrays, slicing objects etc. It helps in writing codes very fast. Read the document: https://lodash.com/docs/4.17.11
To make the code readable, please add as many comments as possible. A good way to write comments is as under:
APIs must be in a separate folder. In our project, we are using the folder ‘main/routes/api/’ to store all the APIs. Make sure you’ve API description in the start of the API function:
// @route POST api/users/login
// @desc Login user and return JWT token
// @access Public
You must organize all the APIs according to their functionality. Make a new file only if you’re implementing a new module, such as CRUD functions of a new entity such as User or Task.
.