okotwal.github.io/project2.html at main · okotwal17/okotwal.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React & GitHub Boost Plan</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="profile">
            <h1>React & GitHub Boost Plan</h1>
            <p>Structured roadmap for mastering React, building projects, and enhancing GitHub.</p>
        </div>
    </header>

    <section class="section-card">
        <h2>MVP Description:</h2>
        <p>Our goal was to boost our github, resume, and make ourselves look professional to future employers. For our MVP, we wanted to start with a few mini projects to learn React, an important and frequently used framework in the workplace. Afterwords, we used our knowledge of React to make a professional portfolio to show to future employers. Lastly, we are going to make a professional Python Web Scraping Bot project to demonstrate my practical skills, problem-solving ability, and initiative, making me a more attractive candidate to CS employers.</p>
    </section>


    <main>
        <section class="section-card">
            <h2>Phase 1: React Learning & Mini Projects (Feb 1 - March 10)</h2>
            <ul>
                <li>
                    <strong>Week 1:</strong> Build a Todo List App while learning React fundamentals, including JSX, components, and state management.
                    <p>During Week 1, I learned the importance of structuring components and managing their states effectively. Working on the Todo List App helped me grasp concepts like handling user input with controlled components, updating states dynamically, and implementing conditional rendering. I also practiced styling components to improve the overall look of the app.</p>

                    <video controls class="project-video">
                        <source src="todolistvid.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>

                    <p><a href="https://github.com/okotwal17/Todo-List-Project" target="_blank">View GitHub Repository</a></p>
                </li>

                <li>
                    <strong>Week 2:</strong> Develop a NASA App that fetches real-time space data using APIs, enhancing API integration skills.
                    <p>During Week 2, I worked on developing a NASA App that fetches real-time space data using the NASA API. This project helped me learn about API integration, fetching data, and displaying it in a dynamic and user-friendly way.</p>

                    <video controls class="project-video">
                        <source src="8mb.video-x7i-plGS2ZhS.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>

                    <p><a href="https://github.com/okotwal17/Nasa-App" target="_blank">View GitHub Repository</a></p>
                </li>
                <li>
                    <strong>Week 3:</strong> Create a Gym App that incorporates complex state management and improves UI/UX understanding.
                    <p>During Week 3, I worked on developing a Gym App that helped me understand more advanced state management techniques in React. This project required handling multiple user interactions, managing complex state updates, and ensuring a smooth UI experience. I also experimented with Tailwind CSS for styling, which allowed me to rapidly prototype and refine the app’s appearance.</p>

                    <video controls class="project-video">
                        <source src="8mb.video-2jB-j04XKU5X.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>

                    <p><a href="https://github.com/okotwal17/Gym-App" target="_blank">View GitHub Repository</a></p>
                </li>
                <li>
                    <strong>Week 4:</strong> Work on a Machine Learning App, integrating basic ML concepts with React to explore AI-driven web apps.
                    <p>During Week 4, I explored integrating basic machine learning concepts with React. At the start of the week, I researched and experimented with different ML models suitable for web applications, setting up a foundational structure for the project.</p>

                    <img src="Screenshot 2025-02-25 174847.png" alt="Start of Week 4 Progress" class="project-image">

                    <p>As the week progressed, I implemented a basic ML model into the app, experimented with data preprocessing techniques, and worked on presenting predictions interactively. I learned about model inference in the browser, optimizing performance, and handling asynchronous tasks efficiently in React.</p>

                    <video controls class="project-video">
                        <source src="8mb.video-jM6-XSNqZvui.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>

                    <p><a href="https://github.com/okotwal17/FreeScribe" target="_blank">View GitHub Repository</a></p>
                </li>
                <li>
                    <strong>Week 5-7 (MVP):</strong> Refine all projects, improve documentation, and optimize GitHub profiles with enhanced READMEs and project visibility.
                    <p>The MVP is now fully functional and ready for final testing. The remaining focus was on finalizing essential features, improving performance, fixing bugs, and enhancing UI/UX.</p>
                </li>
            </ul>
        </section>

        <section class="section-card">
    <h2>Portfolio Development & GitHub Integration</h2>
    <ul>
        <li>
            <strong>Portfolio Progress:</strong> The new portfolio is nearly finished, with only a contact form requiring debugging.
            <p>A preview of the updated portfolio is available below:</p>
            <video controls class="project-video">
                <source src="newPortfolio.webm" type="video/webm">
                Your browser does not support the video tag.
            </video>
            <p><a href="https://github.com/okotwal17/Portfolio" target="_blank">View Portfolio GitHub Repository</a></p>
        </li>
        <li>
            <strong>GitHub Documentation:</strong>
            <ul>
                <li>Repositories are structured with clear commits and logical organization.</li>
                <li>The README draft now includes a project summary, installation guide, and usage instructions.</li>
                <li>Key challenges and solutions have been documented to showcase problem-solving approaches.</li>
                <li>Relevant screenshots and development progress have been added to enhance clarity.</li>
            </ul>
        </li>
        <li>
            <strong>Next Project: Python Web Scraping Buying Bot</strong>
            <ul>
                <li><strong>Overview:</strong> This bot automates online purchasing by scraping product listings, tracking prices, and completing purchases on e-commerce sites. It ensures faster checkout times, real-time stock monitoring, and seamless transactions.</li>
                <li><a href="https://docs.google.com/presentation/d/1S6_-qNzd6eqOprKMnO-QmcDTbwETBV2rGPA-AG11iF0/edit?slide=id.g338cc5cd52e_0_137#slide=id.g338cc5cd52e_0_137">Elevator Pitch</a></li>
                <li><a href="https://docs.google.com/document/d/1SpfsOTGpQKYZDuuvhRb0k-xX3joolugtaUGJ1qu4qCE/edit?tab=t.0#heading=h.qt4qmbtho6qs">Research Document</a></li>
            </ul>
        </li>
        <li>
            <strong>MVP Project</strong>
            <ul>MVP Demo Video</ul>
            <video controls class="project-video">
                        <source src="MVPDemoVideo (1).webm" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
            <ul>MVP Development Process</ul>
            <video controls class="project-video">
                        <source src="DevelopmentProcess (1).webm" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
        </li>
    </ul>
</section>
<section class="section-card"><h2>Web Scraper Bot</h2>
        <h4>The goal is to have the bot scrape two websites, say BestBuy and Amazon, and compare prices of a goods. If the price of the good is cheaper on one website vs another, it will send the user an email to notify them to buy it so that they can resell on the other site. </h4>
<ul>
    <li>Week 1: We built some starter code <a href="https://github.com/okotwal17/PythonWebScrapper">here</a>. We are researching the different technologies and what the next steps with the technologies would be.</li>
<li>Week 2: We built code that the user enters what they want to look for and then it gives them various offers on the product from multiple websites. For the coming weeks, we want to fix a bug where some of the websites don't work, and we might build a simple UI. New Github is <a href="https://github.com/okotwal17/Tech-Deal-Finder">here</a>. Based on how this project is going so far, I think we should plan on just making a basic UI instead of having the user being sent an email. I also think that it should take the user to the website where they can buy the cheapest item so that they can get it as soon as possible.
 <div class="project-video" style="text-align: center; margin-top: 10px;">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/dzFs2Rhf5_4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
</li>
    <li>Week 3: This week, I have made a very, very basic UI that works only on VSCode. This may be the only restriction on our project. Going forward, I will try to polish this UI in addition to making sure our functionality is fully completed. </li>
    <li>Week 4: I have made an amazing frontend using React, and the backend is with Flask and Python. There are some really cool animations and features. The github can be found <a href="https://github.com/okotwal17/TechDealsScraper">here</a></li>

<video controls class="project-video">
    <source src="8mb.video-rSd-XLkt2efH.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

</ul>
        </section>
        <section class="section-card">
            <h2>Final Deliverables In May</h2>
            <ul>
                <li>A solid understanding of React with mini projects made that show the growth in our learning. </li>
                <li>Personal portfolio update with professional projects that are ready to be shown to future employers.</li>
                <li>A fun, useful project that can be put on our portfolio to impress future employers.</li>
            </ul>
            <div class="project-video" style="text-align: center; margin-top: 10px;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-VkvdOxNzK4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

        </section>
    </main>
</body>
</html>