// Hello World
if (energized) {
keepCoding();
} else if (curious) {
scrollDown();
} else {
sleep();
});
![Andreas Campan portrait](img/portfolio-picture.jpg)
Hi, I'm Andreas.
Welcome to my world of code! I'm a Full Stack Developer with a passion for building cutting-edge web applications. From design to deployment, I love turning ideas into reality with clean and efficient code. Whether you need a backend guru or a frontend wizard, I have the skills and expertise to bring your vision to life!
Projects
![Screenshot image of the scoreknight web app](./img/scoreknight-ss.png)
Score Knight
Driven by my wife's frustration with using the Notes app to keep track of scores during game nights, I created a progressive web app that simplifies scorekeeping and can be used offline as well.
Tech Used: React
Score Knight Github![Screenshot image of the TechScraper excel export](./img/TechScraper.png)
TechScraper
CLI script which, upon execution, extracts information on products from the internet and generates an Excel spreadsheet. Additional details can be found in the README file located on my GitHub page.
Tech Used: Node.js, Puppeteer
Github![Screenshot image of the filmquarry website](./img/filmquarry-ss.png)
Film Quarry
This web application provides users with information about movies, directors, and genres. Users are able to sign up for free, update their personal information, and create a list of their favorite movies!
Tech Used: React, Express.js, Node.js, MongoDB
Github![Screenshot image of the citymeet website](./img/citymeet-ss.png)
City-Meetup
This events web application lets you login using your google account to view CF's latest web development events. For more information check out the website below!
Tech Used: React, Google Calendar API, AWS
City-Meetup Github![Screenshot image of the pokedex website](./img/pokedex-ss.png)
FQ Case Study
![Screenshot image of filmquarry's user-details page](./img/case-study/user-details.png)
Problem
As a full stack web developer, I needed to have experience coding both the client-side and server-side of a website.
Purpose
Film-Quarry was a project I created for the purpose of learning how to build the client-side and server-side of an application from scratch using the MERN stack.
Objective
The goal of the project was to design and create an application that allows users to sign up using their email and sign in granting them access to information about different movies, directors, and genres. Users would also be able to create a list of their favorite movies, update their personal information or delete their account.
Approach
Server Side
The server side is composed of two parts, the API hosted on Heroku, and the server hosted on
MongoDB Atlas.
The RESTful API was created using Express.js and Node.js.
The API interacts with a non-relational database called MongoDB via URL endpoints that utilize
HTTP methods
(GET, POST) through a JavaScript library called axios. The database uses the CRUD methods to
retrieve,
store, or manipulate data and was tested throughout development using Postman.
Users are authenticated on the server side via HTTP and JWT (JSON Web Token) authentication,
while CORS
policy is enabled to ensure a higher degree of security.
![Screenshot image of the postman application usage](./img/case-study/postman.png)
![Screenshot image of the filmquarry website](./img/filmquarry-ss.png)
Client Side
The client side was developed with React as a SPA (single page application) that is responsive
across all
devices. React-Redux is used for state management. The React code follows the standard
developing framework
of creating the website using multiple components.
The website provides an interface for users to sign up and log in to retrieve data about movies,
genres and
directors. Users can add their favourite movies to a favourites list as well as access and
change their
profile information.
Conclusion
Challenges
Going into this project I knew I would face some difficulties. Initially I found the concepts of server data security and user authentication perplexing. After spending time with my mentor and tutor, as well as online research, I was able to grasp the techniques and technologies that were used behind the scenes such as CORS policy and JWT.
Hindsight
It's true when they say that hindsight is 20/20; and looking back I wouldn't change a thing. Through my difficulties I have developed my skills as a full stack web developer. I learned and solidified my knowledge of user authentication, server security, react-based websites, and plenty of other topics. There is however always more to learn!
Technical Skills
![javascript logo](./img/js.png)
![nodejs logo](./img/nodejs.png)
![mongodb logo](./img/mongodb.png)
![html logo](./img/html.png)
![css logo](./img/css.png)
![SQL logo](./img/sql.png)
![postgreSQL logo](./img/Typescript.png)
![Angular logo](./img/angular.png)
![react logo](./img/react.png)
![postgreSQL logo](./img/postgres.png)
![C++ logo](./img/C++.png)
![postgreSQL logo](./img/python.png)
About Myself
With a background in oil industry operations, I have cultivated a unique set of skills for collaborative problem-solving and attention to detail. My passion for technology has driven me to pursue various projects in web development, computer systems, and IT services, which have allowed me to develop a keen eye for user-oriented designs and solutions. My goal is to combine my technical expertise with my prior work experience to develop and maintain valuable products and services that meet customers' needs.