Being an aspiring Front-end engineer, I focus both on the funcationality and asthetics i.e User Interface of the website, weather it's a small project or a big because I belive both are important for an excellent webapps.
Also, I belive Documentation of your work is as important as the work, hence I am documenting all my projects to make it efficient and well structures, hence I request requiters to please reade all the ReadME file, to better understand my approach towards the projects.
-
Repo of all the 3 tasks:
- Giphy Gif Search Engine
- Grossries Basket App
- Step Wizrd App
-
Live Links to All the Projects.
-
My Learning Outcomes from All three Projects.
-
Resource that came in Handy.
-
Conclusion.
| Sl.No | Template Name | Live/ Code |
|---|---|---|
| 01 | Giphy Search | code/ Live |
- This was a easy task in comparison to other, but still practiced few skiils.
- Created Developer Giphy API to fetch the data.
- Given the simplicity of project, I did eveything in one file and imported that to App component.
- The sketch shows mapping of components into seperate containers for uasability, which I plan to implement in upcoming days.
- A form input to collect the user input.
- On Enter or Submit key, passing the input to API call, which is called in useEffect.
- Fetch async await function to get search Endpoint, passing the user searched as the endpoint.
- Converting the data to JSON and rendering it to screen using map method.
| Sl.No | Template Name | Live/ Code |
|---|---|---|
| 01 | Basket App | code/ Live |
- I have already implemented this task, while I was learning react few months back, hence it was a brush for me, this was the most complex task out of all.
- useReducer is always a very confusing topic, but this project include the usage of this hook, it was able to understanf useReducer at a practical level.
- React portals never came in handy in any of my recent projects, hence it was good learning opporunity.
- Dues to time limit, I was not able to use useContextAPI for passing all the props, This can be a further improvement point for this project.
- I used module.css files, for having style sheet in coordination to the Component files.
- Components are divided into Cart, Grossries, Layout, UI, I will start with basic.
- UI Component contains basic UI elements which are used in many places of the app.
- Layout Component contains the stick Header and cart component.
- Cart Component contains the Cart, to show the items put in cart by the user and present the total amount.
- Grossries, apart from static list of Grossries, main functionality of Grossries Components is to add the item in cart and increment the amount (X) of same Item.
| Sl.No | Template Name | Live/ Code |
|---|---|---|
| 01 | Step Wizard Form | code/ Live |
- This is the task, I did with my own approach with using react router.
- I did not use NPM wizard package because I wanted to implement it in router, as I was a good opportunity to brush up the react router skills.
- The only thing I was not able to acheive, because of time duration is form validation, this can be noted as improvement point for this project.
- I intend to add this functionality in upcoming days to this project.
- I brushed up some basic routing skills with the help of this project.
- Very straight forward approach, the code is very messy, because I first tried to use many packages, but in the end decide to do it on my own.
- I have simple 5 form pages, 1 about page.
- The next button renders the next form component and previous renders the lst form component, the routing works in syncronous manner.
How do you make sure that the user remains authenticated on page refresh while using Context API State Management?
First approach is to use JSON Web Tokens (JWT) on front end that queries the server for a JWT in the local storage of your browser (local storage, session storage, cookies). This reasonable secure approach from a front end side.
localStoage.setItem(LoginState, Token);Given the code defined above, can you identify two problems?
class MyComponent extends React.Component {
constructor(props) {
// set the default internal state
this.state = {
clicks: 0,
};
}
componentDidMount() {
this.refs.myComponentDiv.addEventListener("click", this.clickHandler);
}
componentWillUnmount() {
this.refs.myComponentDiv.removeEventListener("click", this.clickHandler);
}
clickHandler() {
this.setState({
clicks: this.clicks + 1,
});
}
render() {
let children = this.props.children;
return (
<div className="my-component" ref="myComponentDiv">
<h2>My Component ({this.state.clicks} clicks})</h2>
<h3>{this.props.headerText}</h3>
{children}
</div>
);
}
}
- this Must call super constructor in derived class before accessing 'this' or returning from derived constructor.
- The clickHandler event is never called to increment the click counter.
All the technical task were fun and had opprtuinity to brush up existing skiils, their were no constraints for the projects, that is the best part, I was able to implement them with my own thought process and approach while keepig the core features intact.
It was a good sprint implementing these tasks, I am trying to imporve my CSS skiils to make front-end look much better, these tasks gave me a good opportunity to practice that.
I was also able to work on my logical skills as the the projects include alot of state transions, which requires some brainstorming, hence very good fromt that side.
As a candidate, I would like to say the chosen projects were really interactive and great to assess the onces skill, I learned alot while implementing these tasks.