Project: StrangeRaise

陌筹 || StrangeRaise

Background

College students is a group of ideas and opinions, but the implementation of their ideas and opinions are often due to “individual combat” and money. We hope that we will provide an open platform for college students, where they can launch their own projects, recruit staff, solicit opinions, discuss and use the Internet so that every college student can have the ability to achieve their ideas.

For example: Xiao Li has dream to make his own film, he has a good script, . Through the StrangeRaise, Xiao Li initiated the project to make the film. Finally he found the right photographer and actor, and ultimately to achieve his movie dream.

In general, the StrangeRaise gives each college student the ability to achieve their own ideas.

Feature Introduction

The platform is designed to provide services to the users during the preparatory phase, the promotion phase and the completion phase of the project

During the preparatory phase, college students can publish the project information, the required staff, the expected repay (material or non-material) and other content to the platform for other online users to browse, evaluate and support. The platform will provide the appropriate partner recommendation for the project organizer based on the labeling, or recommend the item which would interest the ordinary users.

In the promotion phase, the projectorganizer can modify the project status, publish the project log to facilitate other online users to understand the progress and situation of the project

At the completion phase, the platform provides users with a confidence evaluation feature for the user to evaluate the project, and project members could collect the feedback.

User Interface Technology Introduction

Framework — FlatUI(Based on Bootstrap)

The overall style of the website is flattened style. The FlatUI framework provides control styles such as input boxes, buttons, etc


Fig. Home page and projects display

The main body of the website is the handwritten DIV + CSS, and we combined  FlatUI with a large number of card-style, such as the project summary in the first page, and specific content page display.


Fig. Project detail


Fig. Your profile

Form Validation Plugin

In the site, there are many forms you need to input, this time you need to  validate the input to ensure the validity of the data, which is also aiming to protect the database is not maliciously inserted dirty data

Since FlatUI is based on Bootstrap, the project uses a jQuery-based form validation plugin for the Bootstrap framework. FormValidation allows you to do multiple validation of an input box and display it asynchronously.


Fig. Wrong Email address page


Fig. Signup successfully

Multi – platform adaptation

As the project is for the Web project, the site can is cross-platform. The site should be responsive, which means in different resolution, it can be adaptive.

In the front-end implementation, the site uses Bootstrap’s Grid system. The card-type module embedded in the fence system, making it adaptive , according to the size of the window to display content. Website set the minimum width, both not only to ensure that the display on the phone, but also to ensure that the text will not overflow the contents when the window zoom.


Fig. Home page in PC and phone


Fig. Modal in PC and phone


Fig. Project detail in PC and phone

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s