Work
Meet App
A Progressive Web Application to show all the events from a calendar in a list format, where you can search events by city.
Created with the objective of build a progressive web application (PWA) with React, using test-driven development (TDD), Google Calendar API as the source of the app data and a serverless function with AWS Lambda for Authentication with Google.
Hosted on GitHub Pages
Technologies used:
- React
- Axios
- Google API
- Google Authentication
- AWS Lambda
- PWA (Progressive Web Application)
- Recharts
- NProgress.js
- Jest
- Enzyme
- Jest Cucumber (Gherkin scenarios in Jest)
- Puppeteer
- Atatus
Jest tests results:
List of features:
-
Filter events by city
Scenario: When user hasn’t searched for a city, show upcoming events from all cities
- Given user hasn’t searched for any city
- When the user opens the app
- Then the user should see the list of upcoming events
Scenario: User should see a list of suggestions when they search for a city
- Given the main page is open
- When the user starts typing in the city textbox
- Then the user should receive a list of cities (suggestions) that match what they’ve typed
Scenario: User can select a city from the suggested list
-
Given user was typing “Berlin” in the city textbox
And the list of suggested cities is showing - When the user selects a city (e.g., “Berlin, Germany”) from the list
-
Then their city should be changed to that city (i.e., “Berlin,
Germany”)
And the user should receive a list of upcoming events in that city
-
Specify the number of events
Scenario: When user hasn’t specified a number, 32 is the default number
- Given the main page is open
- When the user opens the app
- Then it should show the first 32 of them
Scenario: User can change the number of events they want to see
- Given the main page is open
- When the user clicks on the button and edits it to another number
- Then the number of events specified by the button should be shown
-
Show/hide an event's details
Scenario: An event element is collapsed by default
- Given the main page is open
- When the user opens the app
- Then all the events should be collapsed
Scenario: User can expand an event to show its details
- Given a collapsed element
- When the user clicks on the collapsed element
- Then the element should expand
Scenario: User can collapse an event to hide its details
- Given an expanded element
- When the user clicks on the expanded element
- Then the element should collapse
Chat App
A React Native mobile application that gives users the opportunity to chat, share pictures and locations.
Chat App
A React Native mobile application that gives users the opportunity to chat, share pictures and locations.
Technologies used:
- React Native
- Expo
- Gifted Chat UI
- Firebase Cloud Firestore
- AsyncStorage
- NetInfo
- Android Studio virtual devices
Features:
- Chat room
- Personalise background & name
- Anonymous authentication (assign and store user's ID)
- Remote DB (Firestore Database)
- Local DB for offline viewing (AsyncStorage)
- useState, AsyncStorage and Firestore synchronization
- When offline show status and disable input
- When back online, synchronise with remote DB
- Sharing locations
- Sharing images from gallery or camera
eloi.link
An easy to use and fast URL shortener.
Hosted on eloi.link
Technologies used:
- Node.js
- Express
- Mongoose (MongoDB)
- NanoID
- QRcode
-
JavaScript HTML Template strings
When you request a short link, the response HTML is generated dynamically in Node, using plain JS.
The HTML consists of static code together with nested variables generated outside the HTML, which also contains scripts to be executed on local using nested variables (e.g. a Date Object is sent to a script that the client will execute to convert the time to local time).
Features:
- Generate short links
- Route the short links to the original URLs
- Front-end to send the request
- Being able to send requests with GET and obtain a response JSON
- Generate QR codes in the front-end
- Track the number of times a short link is opened
- Show creation time of the short link
Time Travel Films Database
A films database where you can register to show your favourite time travel films and score the films.
It's powered by my own Time Travel Films API.
Time Travel Films Database
A React project, using Hooks, Redux for the state management and React-Router for the navigation.
Case Study of the Full-Stack App
Hosted on Netlify movie-client2.netlify.app
Technologies used:
- React
- Redux
- React-Router
- Axios
- SCSS
- React-Bootstrap
- Parcel-Bundler The site is automatically updated to Netlify and builds for production each time that the main branch of the repository is updated in GitHub.
Features:
- Register users and login
- Keep session open with JSON Web Tokens (JWT)
- Users can modify or delete their account data
- Users can access and search a films database
- Users can rate the films and add to favourites
- Users can open other user's profiles to see their favourite films
Time Travel Films API
API that serves a films and users database, where favourites films and scores can be added to user's data.
Case Study of the Full-Stack App
Technologies used:
- Node.js
- Express
- Mongoose (MongoDB)
- Passport
- bcrypt
- JSON Web Token (JWT)
- JSDoc
- OpenAPI 3.x
- Swagger
- Heroku hosting The documentation is generated automatically from the JSDoc comments in the code using swagger-JSDoc and converted to an interactive website with swagger-ui-express.
Features:
- Register users
- Send JWT on login and registration for authentication
- Send films data
- Store favourites films in user You can read the full interactive documentation here
Films Database (Angular version)
A films database where you can register to show your favourite time travel films and score the films.
It's powered by my own Time Travel Films API.
Films Database (Angular version)
This is my first TypeScript and Angular project, a films database.
Hosted on GitHub Pages
Technologies used:
- TypeScript
- Angular
- RxJS
- Angular Material
- SCSS
- TypeDoc
- JSDoc
Features:
- Register users and login
- Keep session open with JSON Web Tokens (JWT)
- Users can modify or delete their account data
- Users can access and search a films database
- Users can add films to favourites
- Users can open other user's profiles to see their favourite films
Pokédex App
A Pokédex Database to access information about the first 151 Pokemon.
Pokédex App
A Pokédex Database to access information about the first 151 Pokemon.
Hosted on GitHub Pages
Technologies used:
- HTML5
- CSS3
- JavaScript
- Bootstrap 5
- Pokemon API
Features:
- Show all the pokemon of the first generation
- Search by number or name
- On click shows a modal with the information of the pokemon
- Swipe left or right to navigate to the previous or next pokemon
Photography Portfolio
My photography portfolio
Hosted on eloiperez.com/photography
Technologies used:
- HTML5
- CSS3
- JavaScript
- PhotoSwipe
Features:
- Preloading of images
- .jpg image optimisation with JPEGmini
- Smart image loading to load WebP instead of JPEG in compatible browsers
Case Study - Time Travel Films Database
Overview
Time Travel Films Database is a web application, developed using the MERN stack (MongoDB, Express, React, Node). After initial registration a user can add films to 'favourites' or to 'watch list' and score movies. Also, a user can visit the profile of other users plus the option to edit their own personal data.
Purpose & Context
Time Travel Films Database is a personal project built as part of the Full-Stack Web Development course at Career Foundry to showcase my skills developing a full-stack JavaScript application. The idea comes from my love of time travel films and the difficulty to find new films to watch. The purpose was to create a database with every time-travel-related film, so other people can create their own list of films to watch from this genre.
Objective
On the technical part: To develop a Full-Stack web application
following the MERN stack. Starting in the back-end with the
database and node and the front-end with React.
On the functional side: To create an easy to use website where users
can log in and discover films.
Approach
I started by making a list of the features that I wanted to include in the app.
- Register users
- Login users and keep session open with Local Storage and JSON Web Token (JWT)
- Users can modify or delete their account data
- User can access and search a films database
- Users can favourite, add to "plan to watch" and rate the films
- Users can open other users profiles to see their favourite films
Back-end
Using Node.js I created first the schematics for the MongoDB
database linking the different collections and creating an array
of objects in the user for the "myMovies" data. Creating next, the
database in cloud.mongodb.com. Then I wrote all the endpoints with
Express which mange all the requests and supply the data from the
database. I used Passport.js for the user authentication (local
and JWT).
I documented all the endpoints using JSDoc and Swagger. Everything
was hosted in Heroku.
Also, for testing I used Postman.
This is the link to the endpoints documentation
Front-end
I developed the interface where users can access the films data by using React and a basic UI with Bootstrap. I used a combination of React Components, Hooks and Redux to create the different pages: main-page, registration, login, profile and movie-details. It's hosted on Netlify movie-client2.netlify.app
Challenges
I enjoyed building the API and creating the database structure. The documentation was very challenging as it needed to comply with the OpenAPI Specification. I had to learn YAML syntax as part of this process, but it was fulfilling to see how professional the final result looked once complete. On the front-end I really enjoyed the routing on React and it took me a lot of work making Redux work as I needed it to. In the end, it was well worth learning how powerful a tool like Redux can be.
Future Steps
I'd like to improve the UI, add more films to the database and provide tools to the users so they can upload new films to the database, together with a system where trusted users can approve the uploads.
Credits
Role: Lead Developer
Mentor: Akunna Nwosu