![Frontend_Frameworks_and_Libraries[1][1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/frontendframeworksandlibraries11-250306221611-480e3abe-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
Similar to Full Stack development made on React JS Project (20)
Recently uploaded (20)
Ad
Full Stack development made on React JS Project
- 1. GURUKUL INSTITUTE OF ENGINEERING AND TECHNOLOGY POWER POINT PRESENTATION ON “INDUSTRIAL TRAINING” SUBMITTED TO : Miss. SWATI JADON SUBMITTED BY: AKANSHU SHRIVASTAVA BHAWANA SAHANI KULDEEP VERMA
- 2. About VITALS SKILLS • Founded with the mission to bridge the gap between traditional education and industry requirements. • In partnership with Techkriti IIT Kanpur • Provides hands-on experience and mentorship in areas such as: • Web development • Data science • Software engineering
- 3. FULL STACK DEVELOPMENT M E R N
- 4. HTML • Hyper Text Markup Language • Used to create web pages • Hypertext : link between web pages • Markup : text document within tags to structure the web pages. • Platform independent • Images, videos, and audio can be added to a web page. • Uses predefined tags and elements : instruct browser on how to display the content.
- 5. CSS : Styling the User Interface • Cascading Style Sheets • Controls the visual appearance of web pages, including colors, fonts, layout and other media • Saves a lot of work • Create interactive elements like hover effects and animations. • Helps in adapting different screen sizes making responsive websites.
- 6. TAILWIND CSS • Open-source CSS framework • Allows developers to style HTML without writing custom CSS • Provides list of utility classes to control attributes like colors, spacing, layout, typography, and more • Responsive grid systems • Performance : removes unused CSS • Customizations: includes defaults for color palette, spacing scale, box shadows and mouse cursor. • Faster Development reduces need to switch between HTML and CSS files • Easy to learn
- 7. JAVASCRIPT Event handling : responds to events like clicks and mouse movement DOM manipulations: dynamically modify the content and structure of a web pages based on any user Asynchronous operations: fetch data from servers without blocking the user interface
- 8. REACT • Popular and powerful JavaScript library • Used for building dynamic and interactive user interfaces, (primarily for SPAs) • Follows Virtual DOM(Document Object Model) • Fast and works well with other tools and libraries • Components based Architecture • One-way data binding • JSX (JavaScript Syntax Extension)
- 9. NODE JS • Cross-platform environment • Handle large number of requests at once. • Free, open-source JavaScript runtime environment • Uses Javascript for server-side scripting and command line tools • Uses an event-driven, non-blocking I/O model • Build scalable and responsive applications • Asynchronous • Single-threaded and No buffering(delivers data in large chunks) • Data Streaming • Active Community: ensures regular updates, bug- fixes, and new libraries and tools
- 10. Express JS • User-friendly framework • Fast, flexible and minimalist Web framework for Nodejs • A Tool that siimplies building web applications and APIs using JavaScript on the server side, • Key features: • Middleware and Routing • Minimalistic design • Templating power • Flexibility and Customization • Static file serving • Node.Js integration
- 11. MongoDB • Storing and retrieving data • Non-relational DBMS • Document-Oriented Database:Stores data in JSON-like documents, providing a flexible and scalable data model • Query Language: allows for efficient data retrieval and manipulations • Scalability: allows small machines to work together • Simple to learn and use
- 12. IO Socket • JavaScript Library for real-time communication between clients and servers • Built on WebSockets • Fallback mechanisms for broader browser support. • Scalable and easy integration with Node JS. Working: 1. Connection establishment 2. Event-based communication 3. Message Exchange 4. Room and Name
- 13. ABOUT OUR PROJECT : CHAT APPLICATION Real time Chat application Works using : For Frontend – Bun, Vite, Tailwind CSS, React JS, React Router DOM, Zustand. For Backend - Node JS, Express JS Real Time Communication- IO socket Database- MongoDB, Mongoose Others: react-hot-toast , react-icons
- 14. BUN: Bun.js is a runtime, bundler, and package manager faster than Node.js Features: Package management:bun init, bun install and bun run streamline your workflow. Fast testing:bun test runs tests much faster than Jest, with lower CPU usage. Hot reloading: offers fast reloads during development Efficient Bundling: bun build outperforms tools like webpack Vite offers rapid Hot Module Replacement and efficient build processes using ESbuild and Rollup. Features: Hot module replacement(HMR) : very fast Framework agnostic: supports popular frameworks Code splitting and async loading: splits code and chunks asynchronously SSR support: supports server side rendering
- 15. BcryptJS: A password hashing algorithm Combination of hashing and salting. Cookie- parser Middleware that parses cookies attached to a request. Dotenv Loads environment variables from a .env file into the runtime environment JSON-Web Token secure way to share information between two parties, like client and a server. Mongoose Third party library for MongoDB Node JS based Object Data Modelling(ODM) Data Conistency.
- 16. Code:
- 17. SignUp Page:
- 18. Login Page:
- 19. Home Page:
- 21. Thank You !!