industrail tarining presantation of internship

final eyear project ppt

1. Presented by: 202003103510244 – Harsh Patel BTech. IT 8 th Semester CGPIT. Frontend Intern Pixer Digital Guided by : Ms. Krupali Nakarani Senior developer , Pixer digital Mr. Jay Patel Teaching Assistance prof.

2. Table of Contents Points for discussion 1. Company Profile 2. TimeLine Chart 3. Technology / Platform 4. Training Work 5. Project Introduction 6. Screenshots of work during training

3. Table of Contents Points for discussion 7. Future Work 8. References 9. Learning Outcome

4. Pixer Digital Helping You Move Onward. Digitally! Pixer has helped 200+ startups to grow from zero to 1m+ in revenue. The Pixer team is in the top 5% of product dev shops that I have worked with. They are proactive communicators and have got strong product intuition. If you need something to be done quickly and do not want to worry about the details, work with Pixer . Location: Surat, Gujarat Profile: IT Service Company Website: https://www.pixer.io/

5. Company Profile Mission : Our mission at Pixer Digital is to elevate standards and empower individuals through the infusion of technology. We strive to lead the way in innovation, offering reliable services tailored to our clients' needs while fostering a collaborative spirit and commitment to excellence. Vision : At Pixer , we envision a future where every challenge is seen as an opportunity to innovate and shape a brighter tomorrow. We aim to expand our global presence and become a leading development agency, providing innovative and affordable solutions to startups worldwide. Services: Branding: Enhancing brand impact through targeted strategies. Design: Creating captivating visuals for maximum engagement. Development: Efficient solutions tailored to your needs. Mobile Apps: Professional-grade apps for seamless interaction. Web Solutions: Comprehensive website services for online success. What the company focuses on?

6. Timeline Chart Frontend Developer 1.1 Timeline chart

7. Tools & Technologies Used React js Firebase tailwind css Vs code ant design

8. What I did in Training Period? Introduction at Company : On the first day of the week, we were introduced to the company's environment, culture, and workflow. we familiarized ourself with the company's communication channels, including email, Teams, Teamcamp , HRMS and other internal platforms used for collaboration. we were engaged in orientation sessions, met with team members, and received an overview of the workflow of company. Exploring Web Development Basics : I dove into the fundamental pillars of web development, starting with HTML for structuring content, CSS for styling, and JavaScript for interactivity. Through practical exercises and theoretical learning, including building web pages and implementing basic interactivity, I gained essential skills for contributing to web projects within the company. Training Work (Week-1)

9. What I did in Training Period? The primary focus of this week was to go through into learning Javascript and actively practice the implementation of its topics. The overarching goal was to gain a comprehensive understanding of javascript fundamentals and apply them practically to develop functional components. Learning JavaScript and Array Concepts : Throughout the week, we focused on an intensive study of JavaScript, with a particular emphasis on array concepts. This involved a blend of theoretical understanding and hands-on exercises covering variables, data types, control structures, and functions. Key activities included interactive tutorials, coding exercises, peer discussions, and small demo projects. By week's end, we had achieved a comprehensive grasp of JavaScript fundamentals and proficiently understood array manipulation methods, iteration, and element access. This foundational knowledge sets the stage for further learning and application within the company. Week 1 was dedicated to establishing a strong base in both operational and technical skills, laying the groundwork for future contributions to company objectives. Training Work (Week-2)

10. What I did in Training Period? Practicing JavaScript and Exploring Array Methods: This week has been dedicated to practical application and mastery of JavaScript, with a specific focus on learning and implementing array methods and other advanced concepts. Through hands-on exercises, coding challenges, and guided tutorials, I've delved deeper into JavaScript arrays, mastering essential methods for manipulation, iteration, and data management. Additionally, I've expanded my understanding of other key JavaScript concepts, further solidifying my foundation in the language. This week's intensive practice has not only enhanced my JavaScript skills but also prepared me for more advanced development tasks in the coming weeks. Introduction to React JS: As we transition into the next phase of my internship journey, I've begun exploring React JS, a powerful JavaScript library for building user interfaces. This week marked the start of my journey into React's component-based architecture, virtual DOM, and state management concepts. Through a combination of theoretical learning and hands-on experimentation, I've gained insights into React's declarative approach to building UI components and its efficiency in managing complex application states. As I dive deeper into React development, I look forward to harnessing its capabilities to create dynamic and responsive web applications. Training Work (Week-3)

11. What I did in Training Period? During Week 4, the focus was on mastering React JS, a powerful JavaScript library for building dynamic user interfaces. I explored core concepts like components, and state management, while also delving into advanced topics such as React Hooks . Getting Hands-on with React: Hooks and Major Concepts: In this phase of my internship, the focus has shifted to getting hands-on experience with React, particularly diving deep into React Hooks and other significant concepts. Throughout this period, I've immersed myself in learning and implementing React Hooks, such as useState, useEffect, and useContext, to manage state, side effects, and context within functional components. Additionally, I've explored other crucial concepts in React development, including component lifecycle. Through a combination of practical exercises, coding projects, and guided tutorials, I've gained a solid understanding of these advanced React concepts, equipping me with the skills needed to build robust and scalable web applications efficiently. Training Work (Week-4)

12. What I did in Training Period? The goal for Week 5-6 was to continue my exploration of React js and apply it practically by creating a user form with validation capabilities , Todo , color changig panel. Practical with React: Throughout this week, I transitioned my skills from JavaScript to React by diving into practical projects. Leveraging my experience in JavaScript, I developed projects such as a color-changing panel, a todo application, and a form. These projects served as a hands-on introduction to React, allowing me to apply concepts like components, state management, and event handling in a real-world context. Through iterative development and problem-solving, I gained valuable insights into React's component-based architecture and its ability to streamline UI development. As I continue to refine my skills, I look forward to exploring more complex React applications and further expanding my expertise in front-end development. Training Work (Week-5)

13. What I did in Training Period? During week 6 continuing to develop projects like a todo application, a form, and a color-changing panel, I also dedicated time to mastering the fundamentals of TypeScript. Learning TypeScript Basics: This week was dedicated to mastering the fundamentals of TypeScript, a statically typed superset of JavaScript. Through a combination of theoretical study and practical exercises, I gained proficiency in TypeScript's syntax, data types, and type annotations. Key concepts such as interfaces, generics, and type inference were explored to enhance code clarity and maintainability. By leveraging TypeScript's static typing, I learned to catch errors early in the development process, leading to more robust and reliable code. This foundational knowledge sets the stage for further exploration of TypeScript's advanced features and its integration into real-world projects. Training Work (Week-6)

14. What I did in Training Period? The goal for Week 7 was to continue our exploration of TypeScript and apply it practically by creating a user form with validation capabilities. Project in TypeScript : In an effort to deepen my understanding of TypeScript, I undertook the task of building a form within a React JS application. This project served as a practical exercise to apply TypeScript's static typing and type annotations in a real-world scenario. By implementing form elements and handling user input with TypeScript, I gained valuable insights into how type safety enhances code clarity and reduces errors in front-end development. This hands-on experience not only improved my proficiency in TypeScript but also strengthened my skills in building interactive and data-driven web applications using React JS. Training Work (Week-7)

15. What I did in Training Period? Understanding Folder Structure in Professional Development: This week, I focused on studying the significance of folder structures in professional software development. By examining industry standards and best practices, I gained insights into organizing files and directories for enhanced project scalability and maintainability. Implementing these insights, I optimized my project's folder hierarchy, ensuring a logical and efficient structure that facilitates collaboration and future expansion. Project Enhancement through Guided Suggestions: In addition to studying folder structures, I dedicated time to improving my current projects based on expert guidance and suggestions. By incorporating feedback from experienced professionals, I refined the architecture and organization of my codebase, leading to increased readability, efficiency, and maintainability. This iterative process of refinement not only enhanced the quality of my projects but also deepened my understanding of industry standards in software development. Training Work (Week-8)

16. Project Introduction Introduction: My Store is a comprehensive shopping cart application that leverages modern web development technologies to offer users an intuitive and efficient shopping experience. By incorporating dynamic data fetching, responsive design, and seamless user interactions, My Store aims to enhance the online shopping journey for its users.

17. Project Objective Objective: The objective of My Store is to provide users with a seamless shopping experience by offering a user-friendly interface to browse, add, and manage products in a virtual shopping cart. This project aims to simplify the process of online shopping by integrating features such as product categorization, dynamic product fetching from an API, intuitive user forms with validation, and a smooth checkout process. .

18. Project Introduction Technology used: React: A JavaScript library for building user interfaces, used for creating the frontend components and managing state. TypeScript: A statically typed superset of JavaScript that enhances code quality and provides better tooling support, ensuring robustness and maintainability of the codebase. Next.js: A React framework for building server-side rendered (SSR) and statically generated web applications, utilized for server-side rendering and routing.

19. Project Modules Dynamic Product Display: Products are fetched from an API and displayed in categorized sections such as All Categories, Mobile, Laptop, and Television. Product Card: Each product is presented in a card format with detailed information including name, price, description, and an "Add to Cart" button. Add to Cart Functionality: Users can add products to their cart with a single click, which triggers an increment in the cart count. Increment & Decrement Buttons: Users can adjust the quantity of products in their cart using increment and decrement buttons, providing flexibility in managing their purchases. User Form with Validation: A user-friendly form ensures that users provide accurate details when adding new products, with validation for each field to prevent errors. Checkout Process: The checkout process calculates the total price of items in the cart and offers options to clear the cart, remove specific items, or proceed to checkout.

20. Screenshots of work 1.2 Task assigning page

21. Screenshots of work 1.3 Product page

22. Screenshots of work 1.4 Product added to cart

23. Screenshots of work 1.5 empty cart

24. Screenshots of work 1.6 Form with data below

25. Screenshots of work 1.7 Information form

26. Learning Outcome Technical Proficiency: Engaging in the development of the admin dashboard for Earlybird has deepened my understanding and proficiency in frontend technologies such as React.js, TypeScript, and Firebase. I have gained hands-on experience in implementing complex features like data synchronization and user authentication, enhancing my problem-solving skills and practical application of development principles. Project Management and Collaboration: Leading the development lifecycle of the admin dashboard has sharpened my project management skills, including task prioritization, time management, and effective communication with stakeholders. Collaborating with team members through tools like Git and Teamcamp has reinforced the importance of teamwork and facilitated a seamless workflow, contributing to the successful delivery of the project.

27. Future Work "In our future work, we are dedicated to expanding my expertise in Firebase authentication, with a specific focus on phone number and email verification using OTP, and ensuring the secure storage of credential data. Recognizing the critical role of authentication in modern app development, I aim to master these techniques to enhance user security and trust. By investing in this learning journey, I am committed to staying abreast of industry best practices and contributing effectively to future projects."

28. References https://www.typescriptlang.org/docs/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array https://developer.mozilla.org/en-US/docs/Web/javascript https://react.dev/learn https://nextjs.org/learn-pages-router/basics/create-nextjs-app https://redux.js.org/tutorials/fundamentals/part-1-overview

29. Thank You!