Projects

<h2><span style="background-color: transparent; color: rgb(0, 0, 0);">Goal</span></h2><p><span style="background-color: transparent; color: rgb(0, 0, 0);">Utilize the skills learned in website development to create and construct a portfolio website that showcases past work and projects.</span></p><p><br></p><h2><span style="background-color: transparent; color: rgb(0, 0, 0);">About</span></h2><p><span style="background-color: transparent; color: rgb(0, 0, 0);">This project was my most challenging and yet, most fulfilling accomplishment. The portfolio website is the one seen before you and features many sought-after perks and features. Developed and run through Express and Node.js, this Full Stack Web Dev project was entirely created by myself. Except for styles by Bootstrap, this website was designed through custom Javascript, CSS, and HTML. The project features full CRUD implementation, including RESTful routes</span></p><p><br></p><h2><span style="background-color: transparent; color: rgb(0, 0, 0);">Database</span></h2><p><span style="background-color: transparent; color: rgb(0, 0, 0);">Mynameisnick.com features the inclusion of a Mongoose database. This database encompasses models such as comments, users, projects, etc. While stored locally for most of this project's lifetime, the database has since been moved to Atlas to provide a cloud-based system.</span></p><p><br></p><h2><span style="background-color: transparent; color: rgb(0, 0, 0);">Cloudinary</span></h2><p>While not available to an ordinary user, this project features the use of cloud-based photo storage <strong>Cloudinary.</strong> When creating new projects, photos like the one seen above are read and sent to Cloudinary. The link is then stored in a database and sent to requested pages.</p><p><br></p><h2><span style="background-color: transparent; color: rgb(0, 0, 0);">Authentication</span></h2><p><span style="background-color: transparent; color: rgb(0, 0, 0);">Using Passport.js, this project supports user creation. While not a necessity for a portfolio website, this feature enables users to comment on projects and leave feedback. Custom password policies have been set, as well as password resets through email verification.</span></p><p><br></p><h2><span style="background-color: transparent; color: rgb(0, 0, 0);">Error Handling</span></h2><p><span style="background-color: transparent; color: rgb(0, 0, 0);">Using express-error and other custom-made functions, all errors are handled and given a status message with a number. Async functions are placed in async error handlers to avoid time-outs. Flash has also been incorporated to not only send success messages but also error messages with redirects.</span></p><p><br></p><h2><span style="background-color: transparent; color: rgb(0, 0, 0);">Sessions</span></h2><p><span style="background-color: transparent; color: rgb(0, 0, 0);">Each user is granted a session that holds multiple values. Some of which include user info, redirect locations, and errors regarding password policy. These sessions are protected and given an expiration date</span></p><p><br></p><h2><span style="background-color: transparent; color: rgb(0, 0, 0);">Future Goals</span></h2><p><span style="background-color: transparent; color: rgb(0, 0, 0);">I hope to continue my work on this website and add new features. Some of which I had in mind are profile pages, comment replies, upvotes, and the user suspension handlers.</span></p>

<h2><strong><u>First Personal Project</u></strong></h2><p>While not well-designed nor flawless, I believe it is important to show where a developer began. During my early college courses, students seemed to be assigned small console projects every week. They were simple projects, such as a calculator or guessing game, and generally took little time to complete. What did require time, however, was creating a flow chart for each project. Why? Well while not wanting to pay for any online flow chart service, I was designing charts line-by-line on Microsoft Paint. By my third flow chart, the tedious nature of the act began to creep up on me. </p><p>Our class was recently taught how to use turtle, a beginner-friendly python library that allowed users to draw on a canvas. Although not efficient or practical, this library seemed to have all the tools I needed to create my own flow chart service. This marks the beginning of my first personal project, a Flow Chart Creator.</p><p><br></p><h2>Goal</h2><p>Allow users to input statements that are then read and manipulated to form a neat and readable flow chart</p><p><br></p><h2>How it works</h2><p>The program begins with the user submitting their name, date, and class. This value is then placed at the top of the document. A second window of the flow chart preview appears to show the user's progress as their flow chart forms. From here, a user can begin.</p><p>Choose between 5 options:</p><p>-Statement: Regular statements or declaration</p><p>-Function: Function values</p><p>-Conditional: If, for, while, etc.</p><p>-Undo: Undo a previous input</p><p>-Done: Finished</p><p><br></p><p>The user can then input all the fields of their flowchart to create a simple and easy-to-read design like the one featured in the photo above.</p><p><br></p><p>A word of note that I would like to emphasize again is this was my first project. The code is inefficient, poorly made, and if I had the ability to try again, I would do most things differently. I include it as I feel it shows other traits, such as the want to solve problems and use of taught knowledge in an external setting</p><p><br></p>