Internship - 1 (IOT Home Devices Management System - React App)

-

 IoT Home Device Management System - (React App)

The internship has Four sections Frontend, Backend, Flutter app, hardware.
This application was based on Postgres, Node.js, React, and Flutter.

The Backend and hardware part was done by or mentor Aditya Patel, the React part was done by Me and one of my Project Partners Bhavya Gosai, and the Flutter part was done by our other two project members Aman Desai and Jash Tewani.

The React Application or so-called Web App in the Internship, the app is built in react js. the App is also completely Responsive. 


The Web App include the Landing Page, Sign IN / SignUP page , Features Page, Contact Page and the Dashboard. the Dashboard have further sections Devices section, User Setting's section and Setting's section.

The Landing page includes the Navbar, Hero section, Features section, Pricing section, clients section, Footer.
The Contact us page includes the contact details of the company ans well as the contact form where the user can post their queries.


Thene is the Sign IN / Sign UP page where the user can create their account and login to their account to go on dashboard.


once on successfull login a notification toast will apper with the msg of "successfull login" and then the user will be redirected to the dashboard or the devices section where the user can view their devices and controll the devices.


the application has features like Protected Routes, in which if the user is not logged in then they can not go the certain url address by manually entering that in the address bar. if they do try to do that they will be automatically redirected to the home page.
we have also implemented Persistant Login, in which if the user have once logged in and have not logged out then again when they come back they do'nt have to login again they directly will be redirected to the devices page. this is acheived by saving the access token in the browsers local storage. to prevent the token from being accessiblle to others, the token is being expired after 1 day to if the user try to load the page then it will shoe them the messge that the session expired and they have to login again.

That was it all about the Web App, the Web app can only access the devices it can not add or delete the device, for adding the device the user haveto use the Flutter App as the browser do'nt have the access to wifi, and the android have so. the android app is must to setup the device.

the hardware was based on the NodeMcu esp8266 module which will be connecting to the wifi and making request to the Database for the state of the device after a certain interval of time.

Project Live Link:

Comments

Post a Comment

Popular posts from this blog

Sign Language Detection Using open-cv and Haar cascade

-
Image
  Sign Language Detection Using open-cv python Haar Cascade classifiers are an effective way for object detection. This method was proposed by Paul Viola and Michael Jones in their paper Rapid Object Detection using a Boosted Cascade of Simple Features . The algorithm implemented in OpenCV can also be used to detect other things, as long as you have the right classifiers. My OpenCV distribution came with classifiers for eyes, upper body, hands, frontal face and profile face. Haar Cascade is a machine learning-based approach where a lot of positive and negative images are used to train the classifier. Frequently used keywords haar Positive Images:  These images contain the images which we want our classifier to identify. Negative Images:  Images of everything else, which do not contain the object we want to detect. Features  Initially, the algorithm needs a lot of positive images (images of hand) and negative images (images without hand) to train the classifier. Then we need to extract
Read more

University Event management Using React - Node JS - Mongo DB

-
Image
 University Event Management Using React, Nodejs & MongoDB The project is made using React as the Frontend library, Nodejs as a server-side language, and MongoDB as the database. The react application is Divided into components In the Hierarchy where the root or the main component is the App.js and the branches start under it. The Hierarchy of the React application is given in the Bellow Figure. In react, the Web Page or the Application is divided into components and these components are nested inside one another to form a single page. In react we write the code in the .js file but it renders HTML content onto the Browser, this is done with the JSX also known as "JavaScript XML", the JSX is similar to HTML with a slight difference in the syntax such as the class in HTML is className in JSX as the class is a reserved word in the JS. unlike HTML where we use the anchor tag to jump on the other page, we still can use the anchor tag to jump on other pages but there is anothe
Read more

Internship - II (IT446)

-
Internship - II (IT446) Full Stack Intern This internship started from 14th April to 15th July. it was a three months internship at Dev Squirrel private limited. My Role Position Title:  Full Stack Developer Intern Start  Date: April 14, 2022 End Date:  July 14, 2022 Stipend:  Performance based (Range of Rs. 1k 4k / month worked o n project) M y Responsibilities Maintaining & updating websites based on React /  NextJS Developing & maintaining APIs Writing clear, maintainable and testable code Tools and Technologies ReactJS / NextJS NodeJS AWS DynamoDB Lambda Supabase Redis Work done during Internship 1st month Initially for the 1st week some basic training was provided which include understanding the project and updating some minor modification to the code. Understanding the Frontend part which was in NextJS and Optimizing the site by removing the unused components and css. 2nd month Updating certificate page in NextJS Adding Domain Whitelabelling feature Added SMTP settings A
Read more