Digital Career Institute DCI Final Project
DEVents is a totally functional and responsive web app created by and for web developers, who are continuously looking for challenges as well as new ways to expand their knowledge. In DEVents you can find all happenings regarding web development (meetups, workshops or conventions) and also sign up and create your own meetups, projects or study groups.
You won’t need to visit several websites to be aware of the latest web development events. You’ll just need to enter DEVents.
DEVents was developed with MERN-Stack technologies:
We created this web app with React.js and for the style we used Sass with pure CSS.
We also used external APIs and libraries to implement or project, like Google Maps or Moments.
On the backend, we used Node.js. We structured our server with Express.js. The made use of mongoose to store all the data in our MongoDB database and used other packages to develop some features:
Moment.js
We used it to manipulate dates. Working with different APIs brings a lot of inconsistency in the date formats. Moment allowed us to display dates in the desired format.
Node Mailer
Nodemailer is a module for Node.js that we used in our contact form for email sending.
Multer
Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. In our app we the user can create events and upload their own images to our database.
GridFS
GridFS is the MongoDB specification for storing and retrieving large files such as images, audio files, video files, etc. It is kind of a file system to store files but its data is stored within MongoDB collections.
Bcrypt
Bcrypt is a password hashing function and we implemented to keep the user password protected.
Our workflow was based on the agile method with daily meetings regarding backlog and to do tasks, Kanban workflow and weekly sprints with accurate goals.
Since the beginning we have been storing our progress in a project in github and we have been using git to make any change in the repository.
As this project has been developed during the COVID-19 crisis, all the daily meetings have been taken online through apps like Google Meet and Zoom. We also used platforms like Slack and Trello to keep the communication fluent and work following the tasks posted in the list-making application.
Before we started coding, we created some user stories to understand the experience we wanted to give to the users. After that we started a brainstorming to design the website.
We used Figma for the first sketches, where we just avoided to talk about colours or animations but started talking about features we wanted: like a carousel displaying some events, an information site to guide a non registered user to log in, how to display all the events we were going to fetch.
After having a representation of the client side of our project, it was time to inform the backend about the routes the frontend was going to need, so we designed a tree of endpoints.
When we started developing the components, we tried with the red colour but after the first results we decided to change to blue. Also we decided to design a minimalist website that offers an easy adventure to the user.
-
Accomplishing fast workflow and efficient communication using a video-conference application.
-
Improving the team’s research and problem-solving skills
-
Forming one idea agreed by all
-
Working as a team in the same Github repository
-
Obtaining info from other websites due to lack of APIs
-
Using the Google Maps API
-
Uploading external images to our database
-
Filtering the events
-
Login/Sign up with the github account
-
Add space for comments in each event
-
Add share options for social networks
