Code Monkey home page Code Monkey logo

sc2006-scsx-codecrafters's Introduction

Project: MoveInLo!

SC2006 Software Engineering [SCSX Codecrafters]

Our Project

This project is for an mobile application for MoveInLo! MoveInLo is a mobile application that seeks to smoothen the process of moving in and out of university halls/ hostels for new and existing students in Singapore.

Members

  • SCSE EUGENE WEE JUN LIN (U2120698A)
  • SCSE IAIN RODERICK TAY RONG YU (U2221382K)
  • SCSE JOSEPH TEO CHEE HOE (U2223041J)
  • SCSE JIANG YIFEI (U2201092F)
  • SCSE KIM HYUN BIN (U2020316D)

Video Demo

Here is a link to our video demo of our app: https://youtu.be/cP5oUKL51ws


Set-up Guide for New Developers

Note: Both client and server need to be set up correctly for the mobile app to be fully functional.

Run the client & server on separate instances of your CLI terminal.

Setting up the Server (Local)

Note: In order to call APIs in React-Native for local development, we would need to specify the IP address.

  1. Navigate to the project directory.
cd /MoveInLo
  1. Check your IP address for your MacOS or Windows and update the your .env file
cp .env.example .env

Within the .env file,

IP_ADDRESS="<insert_your_ip_address>"
PORT=4000
  1. Navigate to the server directory.
cd /server
  1. Install the server side packages.
npm install
  1. In your CLI terminal, start the server using the following command:
node server.js
  1. You should see the following output in your terminal.
Starting up server...
Server is running on port: 4000
MongoDB connected: ac-ib97lax-shard-00-02.03plysc.mongodb.net
  1. Allow the server to run on this terminal while you run the client mobile app.


Setting up the Client

  1. Navigate to the project directory (if not already there)
cd /MoveInLo
  1. Install dependency packages
npm install
  1. Starting Development Server (You may specify the --clear flag to clear local cache. )
npx expo start --clear
  1. Using an emulator (Download ios/ android emulator)

    Note: You will need to have an ios or android emulator to use this feature. Verify that your simulator is functioning as expected.

npx expo start --ios
npx expo start --android

Alternative: Starting Development Server (Mobile version)

  • Note: You will need to install expo on your mobile device to use this feature.
npx expo start --tunnel

View this link for guide on Expo Setup.


File Folder Structure

We adopted the best practice for file folder structure, adhering to Container-Component pattern. This allows us to achieve the following benefits:

  1. Separation of Concerns
    • By separating the logic and presentation, the pattern improves code maintainability and readability.
    • Containers handle complex logic, while Components focus on rendering UI elements, making it easier to understand and modify individual parts of the codebase.
  2. Reusability
    • The Container-Component pattern encourages code reuse.
    • Containers can be reused across multiple Components, allowing developers to leverage the same logic in different parts of the application.
  3. Testability
    • Containers, being responsible for the business logic, can be easily unit tested in isolation. This facilitates testing and ensures that the logic is functioning correctly, enhancing the stability of the application.
  4. Collaboration
    • Developers can work on different parts of the application simultaneously and independently.

Structure:

  • src/api: API resources
  • src/app: Expo File-folder Routing
  • src/assets: Images, fonts, and other static resources
  • src/screens: Individual application screens
  • src/component: Reusable UI components

Developer Guide

For frontend routing convention, we will adhere by the following standards for readability and adherence to the Expo best practices.

  • Create a _layout.js and index.js for each page.
  • Nested routes can be accessed using the following convention, with each nested route being a directory.
    • customer/schedule/scheduler

sc2006-scsx-codecrafters's People

Contributors

iujinwee avatar eeyearn avatar vanilladucky avatar jyifei avatar softwarelab3 avatar josepht631 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.