Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
In this tutorial, you need some knowledge of reacting, but you don't have to be an expert, just basic knowledge is enough to get started.
The objective is to get the app running, then we will style it.
Let’s begin!
The frontend application directory can be accessed by navigating to it.
It happens that we won't use a lot of files from the frontend directory when developing our react application.
The index.html file is important here. You can remove all the other files.
Don't forget to remove the links to the manifest.json and logo files inside the index.html file.
src Folder
In the src folder, you need to delete all but the index.js file. In the src folder, you need to create two new folders: components and CSS.
Create the following files inside the components folder.
App.jsx Notes.jsx and List.jsx in the CSS folder, and index.css in the components folder.
Currently, the frontend directory should look like this:
index.js
As we won't be using the webvitals import or the webvitals function, remove them from the file.
Our App.jsx component's location has changed, so we must change the path to the App import to it.
CSS import and that of
The index.js file should look like this
The Axios JavaScript library will be needed to communicate with the API endpoints on the Django server backend.
To begin, we'll use npm to install it:
Next, open the package.json file and insert the proxy line below the "private": true, line, so it looks like this.
You will be able to use relative paths when making API requests as a result of this.
Instead of using http://localhost:8000/notes/, you can simply use /notes/.
It appears to be a fantastic idea, doesn't it?
You'll get to see it in action soon. Let's get started on the component files.
To begin, consider the List component.
We won't be doing much here for the time being; all we need to do is declare and export the function.
We begin by importing the necessary hooks, useState, and useEffect.
Following that, we'll write the Note function, which will make use of the useState hook.
The state variable is declared as notes with an initial state of null in the first line.
The second line handles the form data's state.
Here, we declare the state variable as formNote and set its initial state to empty strings.
Please keep in mind that every other function created below should be contained within the Note function above.
This useEffect hook will also make sure the getNotes function is called right after the render has been displayed.
You can pass an empty array ([]) as a second argument to prevent the function from running in an infinite loop.
Therefore, React doesn't need to rerun the effect because it doesn't depend on props or state.
This request method type is getting, and the URL is the relative path /notes/.
In the package.json file, "http://localhost:8000" was not added.
The URL here has to be "http://localhost:8000/notes/".
The way we did it made the code cleaner.
A GET request with Axios prompts the setNewNotes function to write the data in the response, and this updates the notes state variable with a new state.
This results in the value of the state variable changing from null to the data contained in the response.
Lastly, a function is present to handle any errors that may occur during a get request.
Bypassing /notes/ as the URL, we are declaring the request method type as POST.
Data is also part of our request.
The data will be sent to the backend for processing and storage in the database.
Inputs from the title and content fields will be sent to the backend for processing.
The response to the POST request with Axios is not processed we simply use it to query the getNotes function so that the previous notes will also be displayed with the new note.
Then we use the setFormNote function to reset the form inputs to empty strings.
Also, we need to ensure that the form submission doesn't cause the page to reload, so we add the event.preventDefault function which prevents that from happening.
In the function, we include the id parameter so we will be able to pass it as an argument, later on, to delete the particular note.
We don't process the response from the DELETE request when it's made with Axios; we just call the getNotes function using the response function so that the notes get method can get executed again and we'll be able to see the remaining notes.
This code ensures that the input is controlled, so we can handle the changes appropriately.
The function tracks all changes to the form inputs and updates/deletes them as needed.
You won't be able to see what you're typing in the form input fields if you don't use this function, and the values of your input data won't change.
We change event.target to get the value and name, then we use the spread syntax to keep the previous input's value, and finally, we assign a new value to the specific input being operated on.
As the output of the Note function, we now return the React elements to be displayed.
We include the input and text area elements in the form.
Then we add the onChange event handler, which calls the handleChange function whenever any of the input fields are changed.
Then, before rendering the List component, we must first confirm that at least one single note was recovered from the database in order to avoid passing void data to the List component.
If notes were successfully retrieved using the GET function, we pass the data's content (id, title, content) as well as the delete function to the List component.
Finally, remember to export the Note component so that it can be used in the App.jsx file.
The Notes.jsx file should now look like this.
We must now return to the List.jsx file to complete the List component.
We use props to access the data sent from the Note function, which gives us access to the note's title, content, and id.
We pass the id to an onClick function, which calls the delete function in the Note function with the argument id.
Please keep in mind that if you directly pass the delete function into the onClick function, the delete function will run automatically and delete all of your notes.
The delete function could be passed into a function called by the onClick function, as we did above.
Let us now add the Note function to the App.jsx file.
Run the following commands to evaluate the application's current state:
then go back to the project1 directory where the manage.py file is located.
At last, we run:
Here is a screenshot of the fully functional application.
The final step in this tutorial is to style the Notes application so that it looks like this.
Go back to the frontend directory.
To obtain the + icon, you must first install the material UI icon. Run:
AddIcon from the installed material UI icon package is imported into the Notes component.
We'll use useState hooks again to hide the text input and add button until the text area input is clicked.
Depending on the state, the first line shows or hides the text input and add button (false or true).
The state variable isExpanded is declared here with an initial value of false, so that the text input and add button are hidden when the page loads.
The height of the text area input is determined by the second line.
The state variable is declared as rows with an initial state of 1.
Following that, we create a new function Noteshow that is called when the text area input is clicked.
Let us also make the necessary adjustments to the form inputs.
As previously described, the isExpanded condition is added to the text input and button.
The NoteShow function is called when the textarea input is clicked, and two things happen.
1. With the argument 3, the setRows function is called.
which sets the rows attribute of the textarea input to 3, thereby increasing the textarea input's height.
2. With the argument true, the setExpanded function is called, which changes the state to true and then displays the hidden components.
Lastly, at the end of the createNote function, we include setExpanded(false).
As a result, when the form is submitted, the text input and button revert to their hidden states.
This is the component Note.jsx in its final state.
In the components folder, create a new Header.jsx component. This is where our header elements will be stored.
In the components folder, create a new component Footer.jsx to hold our footer elements.
In this case, we simply call the Date().getFullYear() method to obtain the current year and pass it to the p element in our footer.
The Header and Footer components must be imported and called in the App.jsx file.
The CSS codes can be found in the GitHub repo; the classNames were already included while we were building the application.
We have finished developing the Notes Application with CREATE, READ, and DELETE functionality.
You can now experiment and then have fun with your application.
To run it, do the following:
then go back to the project1 directory where the manage.py file is located.
Lastly, we run:
.png)
One of our recruitment officers will get in touch with you today!
One of our recruitment officers will get in touch with you today!
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill-set.
We pride ourselves on being a supportive, cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Storma is a UK-owned business established 5 years ago. We connect high-performing software engineer talent worldwide with some of the world’s leading and most innovative tech companies. Developers join to work as part of international engineering teams and grow their CV and skill-set.
Our client is a Canadian-based eCommerce engineering firm helping merchants build and manage their digital store infrastructure, optimize customer experience, and convert traffic to sales more efficiently.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill set.
We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill sets.
We pride ourselves on being a supportive and cutting-edge workplace continuously investing in staff development, engagement, and well-being. We provide security, career paths, along with individual training programs and mentoring
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill-set.
We pride ourselves on being a supportive, cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers from the Philippines join to work as part of international engineering teams and grow their CVs and skill-set.
We pride ourselves on being a supportive, cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.
We are seeking a motivated and dynamic Business Development Representative to join our team. This role is crucial for driving our business growth by identifying potential clients, conducting direct outreach, and setting appointments for our sales team. The ideal candidate will have a strong passion for sales, a successful track record of achievement, excellent communication skills, and the ability to thrive in a fast-paced environment.
We are seeking a Fullstack Developer with a strong emphasis on front-end development and user experience to join our team. This role requires a balance of front-end and back-end skills, with a preference for candidates who excel in creating visually appealing and user-friendly interfaces.
We are seeking an experienced IT Project Manager to oversee the planning, implementation, and tracking of IT projects. The ideal candidate will have strong technical skills combined with excellent leadership abilities to ensure projects are completed on time, within scope, and within budget
We are looking for a talented Software Tester to join our expanding QA team. You will be working as part of a highly skilled team, helping build high-quality interactive web and mobile applications. You will work on implementing automation tests for our products to make sure they are kept robust.
As a Full-Stack Developer, you will play a pivotal role in advancing our core product, which is market-ready and positioned for continuous improvement and innovation. You will be integral to the entire development lifecycle, enhancing existing features and deploying new functionalities. You will stay abreast of industry trends to continuously innovate and improve our product, taking ownership of projects from conception through to implementation.
As an iOS Developer, you lead technical excellence and management within our team on a leading VOD platform. You ensure iOS projects are delivered on time and within budget while providing clear solutions to complex technical issues. Your role fosters innovation and excellence through the adoption of new technologies and best practices, supporting the team to produce top-tier work.
This role will be to collaborate on the Quality Assurance of the company’s application, whilst also taking responsibility for the back-end architecture. You will assume responsibility for a wide range of activities that will include candidate support, client and integration support activities, and project-based work to improve our overall effectiveness
As a QA Engineer, the ideal candidate will have a strong background in both manual and automated testing, with a focus on mobile and web applications. This role involves working closely with developers, product owners, and UX/UI designers to ensure the highest quality of our software products.
We seek a Video Editor with a strong creative eye. You'll create high-quality YouTube videos, repurpose content, and streamline workflows using Adobe Premiere, Frame.io, CapCut, and other AI tools to maximize your video editing efforts. You will create videos on a weekly basis for our company and our CEO's personal brand. The job is completely remote, but we have offices in Makati, where you might be asked to join us occasionally for team gatherings.
This is an exciting opportunity for a video editor who has a growth mindset, who takes pride in their work and enjoys working from the comfort of their home.
As a Senior Developer specializing in Zuora Subscription Billing, you will be responsible for the design, development, and maintenance of Zuora Subscription Billing solutions to support our subscription-based business model. You will work closely with cross-functional teams to understand business requirements and implement solutions that align with the company's objectives.
Cloud Employee is a UK-owned Philippines business established 8 years ago.We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.
Cloud Employee is building a ‘Future of Work’ AI driven talent tech platform in the remote software engineer staffing space.
In this strategic and hands-on creative role, you'll have the opportunity to shape the narrative of remote work and impact the tech industry at a global scale.
With team members across the US, LATAM, Europe and Asia - we’re on a mission to bridge the talent gap with our matching platform and employee experience programs.
We need your storytelling strategy skills to ‘share the journey’ and the human stories behind our business
Cloud Employee, is a UK owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.
We are now seeking a passionate Senior/Team Lead Full-Stack PHP Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.
Cloud Employee is a UK-owned business established 8 years ago. We connect high-performing software engineer talent worldwide with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines and Brazil as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.
Cloud Employee, is a UK owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee is a UK-owned business established 8 years ago. We connect high-performing software engineer talent worldwide with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines and Brazil as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.
Our Client
A leading UK-company that specializes in providing foreign currencies solutions
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
A completely integrated innovation studio within the corporate framework, with a primary emphasis on making the future of the food industry accessible to all. Their core objective is to discover, create, and expand tailored automation remedies, utilizing a team of proficient individuals covering domains like engineering, robotics, and artificial intelligence. Our central mission revolves around constructing automation technology solutions that empower individuals to achieve greater feats.
Position Summary
In your role as a Robotics Software Engineer, your expertise in Robotic Software Engineering will be the key to your success. Collaborating with our skilled team, you'll play a pivotal role in advancing our cutting-edge product development accelerator. Your responsibilities will involve crafting, programming, and evaluating top-notch software essential for ensuring the dependable and secure operations of commercial robots.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
A completely integrated innovation studio within the corporate framework, with a primary emphasis on making the future of the food industry accessible to all. Their core objective is to discover, create, and expand tailored automation remedies, utilizing a team of proficient individuals covering domains like engineering, robotics, and artificial intelligence. Our central mission revolves around constructing automation technology solutions that empower individuals to achieve greater feats.
Position Summary
The position of Mechanical Engineer corresponds to a mid-level role. An ideal candidate for this position possesses robust practical expertise in various technical systems. The responsibilities encompass a combination of individual input within projects and actively leading teams towards achieving a remarkable standard of technical proficiency.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
A completely integrated innovation studio within the corporate framework, with a primary emphasis on making the future of the food industry accessible to all. Their core objective is to discover, create, and expand tailored automation remedies, utilizing a team of proficient individuals covering domains like engineering, robotics, and artificial intelligence. Our central mission revolves around constructing automation technology solutions that empower individuals to achieve greater feats.
Position Summary
In the role of an Industrial Design Engineer with a focus on cobotics, you will assume a crucial position in envisioning, crafting, and honing both the tangible and operational facets of our collaborative robotic solutions. Your collaboration will extend to cross-functional groups, including mechanical engineers, software developers, and UX designers, in the pursuit of devising cobotic systems centered around users. These systems will redefine effectiveness and safety within industrial settings.
Cloud Employee, is a UK owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.
A top rated and state of the art cloud based video interviewing solutions company based in the UK catering to over 5000 prominent companies around the world such as Samsung, Uber, Boohoo, Coinbase, 7-Eleven and many more.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
A completely integrated innovation studio within the corporate framework, with a primary emphasis on making the future of the food industry accessible to all. Their core objective is to discover, create, and expand tailored automation remedies, utilizing a team of proficient individuals covering domains like engineering, robotics, and artificial intelligence. Our central mission revolves around constructing automation technology solutions that empower individuals to achieve greater feats.
Position Overview
In the role of an Electrical Engineer, your expertise and proficiency in designing electrical-mechanical systems will be a key asset, enabling you to stand out. Collaborating with our skilled team, you will play a vital role in expediting product development processes.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.
We are now seeking a passionate Front End React Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.
We are now seeking a passionate Full-Stack Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill-set.We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring
Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.
We are now seeking passionate mid to senior-level Fullstack PHP Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.
Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.
We are now seeking passionate Lead Full-Stack PHP Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.
We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.
Cloud Employee is a UK-owned business established eight years ago. We connect high-performing software engineer talent worldwide with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines and Brazil as part of international engineering teams and grow their CV and skill-set.
We pride ourselves on being a supportive and cutting edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.
February 16, 2024
In this tutorial, you need some knowledge of reacting, but you don't have to be an expert, just basic knowledge is enough to get started.
The objective is to get the app running, then we will style it.
Let’s begin!
The frontend application directory can be accessed by navigating to it.
It happens that we won't use a lot of files from the frontend directory when developing our react application.
The index.html file is important here. You can remove all the other files.
Don't forget to remove the links to the manifest.json and logo files inside the index.html file.
src Folder
In the src folder, you need to delete all but the index.js file. In the src folder, you need to create two new folders: components and CSS.
Create the following files inside the components folder.
App.jsx Notes.jsx and List.jsx in the CSS folder, and index.css in the components folder.
Currently, the frontend directory should look like this:
index.js
As we won't be using the webvitals import or the webvitals function, remove them from the file.
Our App.jsx component's location has changed, so we must change the path to the App import to it.
CSS import and that of
The index.js file should look like this
The Axios JavaScript library will be needed to communicate with the API endpoints on the Django server backend.
To begin, we'll use npm to install it:
Next, open the package.json file and insert the proxy line below the "private": true, line, so it looks like this.
You will be able to use relative paths when making API requests as a result of this.
Instead of using http://localhost:8000/notes/, you can simply use /notes/.
It appears to be a fantastic idea, doesn't it?
You'll get to see it in action soon. Let's get started on the component files.
To begin, consider the List component.
We won't be doing much here for the time being; all we need to do is declare and export the function.
We begin by importing the necessary hooks, useState, and useEffect.
Following that, we'll write the Note function, which will make use of the useState hook.
The state variable is declared as notes with an initial state of null in the first line.
The second line handles the form data's state.
Here, we declare the state variable as formNote and set its initial state to empty strings.
Please keep in mind that every other function created below should be contained within the Note function above.
This useEffect hook will also make sure the getNotes function is called right after the render has been displayed.
You can pass an empty array ([]) as a second argument to prevent the function from running in an infinite loop.
Therefore, React doesn't need to rerun the effect because it doesn't depend on props or state.
This request method type is getting, and the URL is the relative path /notes/.
In the package.json file, "http://localhost:8000" was not added.
The URL here has to be "http://localhost:8000/notes/".
The way we did it made the code cleaner.
A GET request with Axios prompts the setNewNotes function to write the data in the response, and this updates the notes state variable with a new state.
This results in the value of the state variable changing from null to the data contained in the response.
Lastly, a function is present to handle any errors that may occur during a get request.
Bypassing /notes/ as the URL, we are declaring the request method type as POST.
Data is also part of our request.
The data will be sent to the backend for processing and storage in the database.
Inputs from the title and content fields will be sent to the backend for processing.
The response to the POST request with Axios is not processed we simply use it to query the getNotes function so that the previous notes will also be displayed with the new note.
Then we use the setFormNote function to reset the form inputs to empty strings.
Also, we need to ensure that the form submission doesn't cause the page to reload, so we add the event.preventDefault function which prevents that from happening.
In the function, we include the id parameter so we will be able to pass it as an argument, later on, to delete the particular note.
We don't process the response from the DELETE request when it's made with Axios; we just call the getNotes function using the response function so that the notes get method can get executed again and we'll be able to see the remaining notes.
This code ensures that the input is controlled, so we can handle the changes appropriately.
The function tracks all changes to the form inputs and updates/deletes them as needed.
You won't be able to see what you're typing in the form input fields if you don't use this function, and the values of your input data won't change.
We change event.target to get the value and name, then we use the spread syntax to keep the previous input's value, and finally, we assign a new value to the specific input being operated on.
As the output of the Note function, we now return the React elements to be displayed.
We include the input and text area elements in the form.
Then we add the onChange event handler, which calls the handleChange function whenever any of the input fields are changed.
Then, before rendering the List component, we must first confirm that at least one single note was recovered from the database in order to avoid passing void data to the List component.
If notes were successfully retrieved using the GET function, we pass the data's content (id, title, content) as well as the delete function to the List component.
Finally, remember to export the Note component so that it can be used in the App.jsx file.
The Notes.jsx file should now look like this.
We must now return to the List.jsx file to complete the List component.
We use props to access the data sent from the Note function, which gives us access to the note's title, content, and id.
We pass the id to an onClick function, which calls the delete function in the Note function with the argument id.
Please keep in mind that if you directly pass the delete function into the onClick function, the delete function will run automatically and delete all of your notes.
The delete function could be passed into a function called by the onClick function, as we did above.
Let us now add the Note function to the App.jsx file.
Run the following commands to evaluate the application's current state:
then go back to the project1 directory where the manage.py file is located.
At last, we run:
Here is a screenshot of the fully functional application.
The final step in this tutorial is to style the Notes application so that it looks like this.
Go back to the frontend directory.
To obtain the + icon, you must first install the material UI icon. Run:
AddIcon from the installed material UI icon package is imported into the Notes component.
We'll use useState hooks again to hide the text input and add button until the text area input is clicked.
Depending on the state, the first line shows or hides the text input and add button (false or true).
The state variable isExpanded is declared here with an initial value of false, so that the text input and add button are hidden when the page loads.
The height of the text area input is determined by the second line.
The state variable is declared as rows with an initial state of 1.
Following that, we create a new function Noteshow that is called when the text area input is clicked.
Let us also make the necessary adjustments to the form inputs.
As previously described, the isExpanded condition is added to the text input and button.
The NoteShow function is called when the textarea input is clicked, and two things happen.
1. With the argument 3, the setRows function is called.
which sets the rows attribute of the textarea input to 3, thereby increasing the textarea input's height.
2. With the argument true, the setExpanded function is called, which changes the state to true and then displays the hidden components.
Lastly, at the end of the createNote function, we include setExpanded(false).
As a result, when the form is submitted, the text input and button revert to their hidden states.
This is the component Note.jsx in its final state.
In the components folder, create a new Header.jsx component. This is where our header elements will be stored.
In the components folder, create a new component Footer.jsx to hold our footer elements.
In this case, we simply call the Date().getFullYear() method to obtain the current year and pass it to the p element in our footer.
The Header and Footer components must be imported and called in the App.jsx file.
The CSS codes can be found in the GitHub repo; the classNames were already included while we were building the application.
We have finished developing the Notes Application with CREATE, READ, and DELETE functionality.
You can now experiment and then have fun with your application.
To run it, do the following:
then go back to the project1 directory where the manage.py file is located.
Lastly, we run:
Have a question?
