One of these APIs should do the job. 1- here or here or here If you face issue fetching the data maybe this helps.
Create an application that fetches data from one of the above API.
1- the app functionallity should look like this you are free to change design be as creative as possible .check the examples down for inspirations**
1- Background image of the web page changes according to the Weather.
PS: You are free to use a CSS framework.
*Those are some images for inspiration.
- Use
projectsin github, they can be useful in arranging the tasks or issues with description and image so everyone knows what they should do - to track their work its better to add columns like
in progress,done, andclosed - minimize the communication required in Slack, try to make them depend on review comments and task descriptions
- They should create a branch locally with the naming convention
[issue id + issue title]and then push it and submit a Pull Request that must be attached to the issue after - Make the tasks small but more, this can reduce conflicts and won't overwhelm them, not sure if it a good idea but I’m just experiencing here so they may do more than one task a week depending on how fast they are
Pull Requests
- Go to the issues board and create a new issue with the task assigned to you.
- Assign the issue to yourself so others know who is working on this issue.
- Create a new pull request from that issue and also assign it to yourself, Github will automatically create a branch for you and give you instructions how to check it out.
- After finishing the work, push your code and assign the team leader on that pull request so they can review the code.
Commit Message Format
Each commit message consists of a header, a body and a footer. The header has a special format that includes a type and a subject:
<type>: <subject>
<BLANK LINE>
<body>
The header is mandatory, while the body is optional but highly encouraged.
Type
Must be one of the following:
- Build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- Doc: Documentation only changes
- Feat: A new feature
- Fix: A bug fix
- Perf: A code change that improves performance
- Refactor: A code change that neither fixes a bug nor adds a feature
- Style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
Subject
The subject contains a succinct description of the change:
- use the imperative, present tense: “change” not “changed” nor “changes”
- don’t capitalize the first letter
- no dot (.) at the end
Body
Just as in the subject, use the imperative, present tense: “change” not “changed” nor “changes”. The body should include the motivation for the change and contrast this with previous behavior.
- The code should be totally clean and checked line by line before committing and pushing.
- You shouldn't leave any unnecessary comments in the code.
- Don't leave any logs inside the code.
- All variables should be
constexcept for specific cases where you will need to uselet - Variables should use camelCase naming convention
- CSS classes should follow BEM naming convention. You can find more about it here.
- Leave only one empty line between CSS classes. This also goes for different purpose code blocks (like
importsand variables under it). - Make sure your naming is right and not confusing i.e. the
Navbarshouldn't be namedheaderor when you fetchmoviesyour function should returnmoviesnotdata - Make sure you clean your imported modules or files that you don't use before committing. The same goes for any variable, function or piece of code not used.
- Don't repeat yourself (DRY). Make sure the code you write is reusable and reduce repetition of information of all kinds. For example, don't write two functions that do the same or almost the same job. Read more about DRY here.
-
Use
create-react-appfor the boilerplate react app. -
depending on what flow to take
- Follow the component container pattern, so your two main folders inside the
srcwill be thecomponentsfolder that will contain your components andcontainersthat will contain container components. You can read more about container components here or you can ask you team leader about it for more clarity. - similar concept you can use the component page take a look here
- Follow the component container pattern, so your two main folders inside the
-
Use
scssinstead of css if you going withreact-bootstrap -
You can use
postcssif you are going with another library that uses something liketailwind -
Global style variables will be inside a
stylefolder inside thesrcinside a_variables.scss.If you are usingreact-bootstrapthis can come in handy! -
The main folder names inside the
srcshould be lower case likecomponentsandcontainer or pagesother folders inside them should be TitleCase likeProgressBarand files inside these folder will be TitleCase too likeProgressBar.js.If you need styles then add them with the same.jsfile name likeProgressBar.scss
Your project hierarchy should look something similar to this:
.
├── src
├── components
├── ProgressBar
├── ProgressBar.js
├── ProgressBar.scss
├── containers
├── About
├── ContactForm.js
├── About.js
├── style
├── _variables.scss
- All dependencies inside the
package.jsonshould be used in the project. - It's recommended to use Yarn to install the packages.
- General use images should be inside a folder inside
srcunderimagesand try to usesvgas much as possible. Component specific images should be under their folders. - You should have prettier extension installed and make sure your code is well formatted before submitting it.