As a final project, we had to create an interface for the Orange Digital Center where you can see all the activities and sign up. We wanted to create an interactive and dynamic space where community members, visitors, and administrative staff can connect. This project seeks not only to increase participation in events and activities, the interface is designed to be intuitive, user-friendly, and easy to use.
The interface is designed so that users can view all activities and sign up for an activity while administrators can create, edit and delete activities.
-
Cynthia Álvarez - Product Owner, Fullstack Developer, QA Tester
-
Andrea Sainz - Scrum Master, Fullstack Developer
-
Jaime Martínez - Frontend Developer
-
Raúl Radillo - Frontend Developer
React: Used to build a dynamic and responsive user interface on the frontend. Known for its efficiency and flexibility in creating interactive interfaces.
Node.js and
Express: These form the backbone of the backend, providing a robust and flexible server environment. Express, a framework for Node.js, makes it easy to create APIs and handle server requests and responses.
TypeScript: Adds static typing to JavaScript, improving code quality and reducing runtime errors.
MySQL: Relational database management system used to store and manage user and activity data efficiently.
React Bootstrap: Design framework for React, used to create a consistent and aesthetically pleasing user interface.
Vite: Modern development tool that improves build speed and offers a streamlined development environment.
React Testing Library: A set of utilities to test React components, ensuring they work as expected.
Jest: A JavaScript testing framework, used for testing the logic and functionality of applications.
Supertest: An assertion library for testing HTTP servers, particularly useful in conjunction with Node.js and Express.
ts-jest: A TypeScript preprocessor for Jest, allowing TypeScript code to be directly tested with Jest.
Scrum: A framework that helps teams work together, encouraging teams to learn through experiences, self-organize while working on a problem, and reflect on their wins and losses to continuously improve.
Jira: As an agile project management tool, Jira has been crucial in organizing our workflow. It has allowed us to create and prioritize the project backlog, plan sprints, track progress with Kanban and Scrum boards, and generate reports that help us continuously improve our processes. Visit Jira
This user interface (UX/UI) project has been created using the Figma tool, applying Atomic UX/UI principles. The iconography and typography were provided by Orange. Figma, a collaborative UI design platform, has allowed us to work together in real-time, creating interactive prototypes and high-fidelity designs. It has been instrumental in the conceptualization and rapid iteration of our design ideas, allowing us to share and receive effective feedback from stakeholders. View UX/UI on Figma.
GitHub: A code hosting platform that uses Git. It has provided us with a central space to store our repositories, review code through pull requests, manage tasks, and document our progress. GitHub Actions for Continuous Integration/Continuous Delivery (CI/CD) has also played a vital role in automating our testing and deployment pipelines. Visit Our GitHub Repository
View the User Flowchart Diagram
npm run dev # Starts the Vite development server for a live development environment
npm run start # Starts the Vite server for production
npm run test # Runs tests with Vitest, ensuring code reliability and functionThe backend of the project is developed in Node.js, using Express and TypeScript.
- bcrypt: For secure password hashing.
- cookie-parser: Middleware for parsing cookies in HTTP requests.
- cors: To set up CORS policy in the Express application.
- dotenv: For managing environment variables.
- express: As a web framework for Node.js.
- express-session: For managing sessions in Express.
- jsonwebtoken: To implement JSON Web Tokens.
- mysql2: As a MySQL client for Node.js.
- sequelize: ORM for Node.js, facilitating SQL database interactions.
- tslint: For static analysis and improving TypeScript code quality.
- uuidv4: For generating universally unique identifiers (UUIDs).
These are used to enhance the development process and TypeScript integration:
- @types/bcrypt, @types/cookie-parser, @types/cors, @types/express, @types/express-session, @types/jsonwebtoken: Provide TypeScript types for respective libraries.
- ts-node-dev: Automatically restarts the server during development when TypeScript file changes are detected.
- typescript: The primary programming language used in the backend development.
npm run dev # Uses nodemon to run index.js, automatically restarting the server on file changes
npm run test # Default script for tests, to be modified according to implemented tests- Clone the repository to your local machine:
git clone https://github.com/andsainz/OrangeDigitalCenter.git- Navigate to the backend directory from the root of your project folder:
cd backend- Install the necessary npm packages:
npm install-
Create a .env file in the backend directory and fill it with the necessary environment variables.
-
Start the backend server:
npm run devThis will start the Node.js server typically on port 3000.
To get the frontend running:
- Open a new terminal and navigate to the frontend directory:
cd frontend- Install the necessary npm packages:
npm install- Start the frontend development server:
npm run devBy default, this will launch on http://localhost:5173.
We have tested with React Testing Library in frontend and Jest and Supertest in backend. To run tests, use the following command in both frontend and backend directories:
npm run testThe Orange Digital Center project is distributed under the ISC License.
Thank you all.