Git Product home page Git Product logo

observatorio-migracion's Introduction

Observatorio de Migración


This project was created for the Community Service TCU-652 called "Migrantes como sujetos políticos" at Universidad de Costa Rica. The team was conformed by 1 History students, 1 Philology students and 2 Computer Science students.

Target audience

Migrants living in Costa Rica.

Requirements

Users

The system must have two kind of users:

  • The editor can manage posts (create, delete, update, read).
  • The admin has the same permissions as an editor and has the ability to add or remove users.

The blog

  • A website where students and proffesors can post content focused on costarrican migration.
  • A post can contain images, videos, links just like any blog post. The dashboard must allow to manage these post, filter and order the posts.
  • These post must have a system category for posts. The administrator can create, edit and remove categories. The editors just can use these categories, not modify them.
  • The blog page has a search filter to find easier posts about an specific topic and the users have to be able to filter by categories.

Telephone directory

A page that contains information about institutions and places related with migration in the country. The info must be shown in ascending order. Additionally, a search filter for the contacts.

About section

It contains information about the webpage purpose.

Tecnologies selection

The project required an original design and it has to be easy to use for the people.

We choose Angular because the facility to reuse code in components, models and services. The code structure that generate automatically is easier than just with HTML, CSS and JS. Also, the observables that were helpful making the dinamic search filter and the category filter, that updates without reload the page.

Additional frontend tools: Boostrap, Angular Material.

For the admin dashboard we choose Strapi. It is a Open source Node.js Headless CMS. It makes very easy to manage the posts, filtered, ordered and allow the editors to have drafts before publising content.

Solution implementation

We used a color palleted given by the Community Service Coordinator and we design the prototypes in AdobeXD. We started to code as soon as the design was approved.

  • The solution includes: home, blog, about, and directory pages.
  • Dark and light mode.
  • Search and filter in blog page and directory page.
  • Events section in home page.
  • Category system.

Frontend video

Observatorio.de.Migracion.para.TCU-652.de.la.Universidad.de.Costa.Rica.-.Frontend.1.mp4

CMS video

Observatorio.Migracion.strapi.mp4

Run your own

Version

You must have installed Angular 11.1.2 in your computer.

Development server

First, npm i to install node dependencies. Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

observatorio-migracion's People

Contributors

jodaut 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.