Mercadera

sergiotapia · January 31, 2016, 1:58am

Mercadera is the easiest way to sell your things online. 1-click sign in, take a
pic and sell - all completely free.

My brother and I started work on a brand new Meteor app that allows users to sell their things online with ultimate ease.

It’s all 100% open source, check our repo: GitHub - danieltapia/mercadera: Mercadera - buy and sell your stuff without the hassle. Built using Meteor and React.

I hope this helps people starting out, and shows a great way to build Meteor apps today. It’s a work in progress, first commit being 20 hours ago, but we fully intend to finish this and deploy using Galaxy.

I’ll update this thread as major features are added, hopefully we can iterate and refactor with feedback from the community. We want this project to be a good option for people looking for example applications of Meteor using React.

Check our repo for the goodies. Thanks!

sergiotapia · January 31, 2016, 4:29am

Users can now sign up to the website using either Twitter and Facebook. We tried to integrate Google but I don’t want the hell those guys are doing with their UI it’s entirely new and confusing for now.

Next up, setting up server side scaffolding so the site owner can just execute a script and prefill the cities and categories collection. In Rails, there’s seeds.rb - let’s see what we can do similar in Meteor that’s easy to use.

sergiotapia · January 31, 2016, 11:15am

I added the first input component of many, the <TextInput /> component. It’s stateless, and just presents UI and any errors.

github.com

danieltapia/mercadera/blob/6b8ddbd43c93957944849338cec164b81b034a6e/client/components/inputs/textInput.jsx

TextInput = React.createClass({
  render: function() {
    return (
      <div className={this.props.errors.length > 0 ? "form-group has-error" : "form-group"}>
        <label htmlFor={this.props.name} className="col-sm-2 control-label">{this.props.label}</label>
        <div className="col-sm-10">
          <input type="text" className="form-control" name={this.props.name} placeholder={this.props.placeholder} />
        </div>
      </div>
    );
  }

});

<TextInput name={"name"} label={"Nombre:"} placeholder={"Escribe un nombre para tu anuncio. Corto y sencillo!"} errors={[]} onChange={this.handleChange} />

<TextInput name={"name"} label={"Nombre:"} placeholder={"Escribe un nombre para tu anuncio. Corto y sencillo!"} errors={["can't be empty.", "too long"]} onChange={this.handleChange} />

The wrapping form component is going to be in charge of validating values, and setting errors. On to the next inputs!